后CSS 图像集- 聚合填充( ) 已贬值为赞成 后图像设定功能。 。 。
PostCSS 图像集( ) 函数 
PostCSS 图像集( ) 函数 让您显示依赖分辨率的图像
使用 image-set() cSS 函数,随 CSS 图像
规格.
.example {
background-image: image-set(
url(img.png) 1x,
url([email protected]) 2x,
url([email protected]) 600dpi
);
}
/* becomes */
@media (-webkit-min-device-pixel-ratio: 1), (min-resolution: 96dpi) {
.example {
background-image: url(img.png);
}
}
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
.example {
background-image: url([email protected]);
}
}
@media (-webkit-min-device-pixel-ratio: 6.25), (min-resolution: 600dpi) {
.example {
background-image: url([email protected]);
}
}
.example {
background-image: image-set(
url(img.png) 1x,
url([email protected]) 2x,
url([email protected]) 600dpi
);
}
使用量
添加 PostCSS 图像集( ) 函数 到您的构建工具 :
npm install postcss-image-set-function --save-dev
节点
使用 PostCSS 图像集( ) 函数 处理您的 CSS :
import postcssImageSetFunction from 'postcss-image-set-function';
postcssImageSetFunction.process(YOUR_CSS, /* processOptions */, /* pluginOptions */);
邮政
添加 邮政 到您的构建工具 :
npm install postcss --save-dev
使用 PostCSS 图像集( ) 函数 作为插件 :
import postcss from 'gulp-postcss';
import postcssImageSetFunction from 'postcss-image-set-function';
postcss([
postcssImageSetFunction(/* pluginOptions */)
]).process(YOUR_CSS);
网络软件包
添加 PostCSS 装入器 到您的构建工具 :
npm install postcss-loader --save-dev
使用 PostCSS 图像集( ) 函数 在您的 Webpack 配置中 :
import postcssImageSetFunction from 'postcss-image-set-function';
module.exports = {
module: {
rules: [
{
test: /\.css$/,
use: [
'style-loader',
{ loader: 'css-loader', options: { importLoaders: 1 } },
{ loader: 'postcss-loader', options: {
ident: 'postcss',
plugins: () => [
postcssImageSetFunction(/* pluginOptions */)
]
} }
]
}
]
}
}
古尔普
添加 Gulp PostCSS (英语) 到您的构建工具 :
npm install gulp-postcss --save-dev
使用 PostCSS 图像集( ) 函数 在您的 Gulp 文件中 :
import postcss from 'gulp-postcss';
import postcssImageSetFunction from 'postcss-image-set-function';
gulp.task('css', () => gulp.src('./src/*.css').pipe(
postcss([
postcssImageSetFunction(/* pluginOptions */)
])
).pipe(
gulp.dest('.')
));
格鲁特
添加 Grunt 邮政CSS 到您的构建工具 :
npm install grunt-postcss --save-dev
使用 PostCSS 图像集( ) 函数 在您的 Grunt 文件中 :
import postcssImageSetFunction from 'postcss-image-set-function';
grunt.loadNpmTasks('grunt-postcss');
grunt.initConfig({
postcss: {
options: {
use: [
postcssImageSetFunction(/* pluginOptions */)
]
},
dist: {
src: '*.css'
}
}
});
选项
保护
这个 preserve 选项决定原始声明是否使用
image-set() 被保存下来。 默认保存.
postcssImageSetFunction({ preserve: false })
.example {
background-image: image-set(
url(img.png) 1x,
url([email protected]) 2x,
url([email protected]) 600dpi
);
}
/* becomes */
@media (-webkit-min-device-pixel-ratio: 1), (min-resolution: 96dpi) {
.example {
background-image: url(img.png);
}
}
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
.example {
background-image: url([email protected]);
}
}
@media (-webkit-min-device-pixel-ratio: 6.25), (min-resolution: 600dpi) {
.example {
background-image: url([email protected]);
}
}
认证
这个 oninvalid 选项决定如何无效使用 image-set() 应该是
处理。 默认的无效用法 image-set() 被忽略。 他们可以
配置到显示 a warning 或者说 throw 错误.
postcssImageSetFunction({ oninvalid: 'warning' }) // warn on invalid usages
postcssImageSetFunction({ oninvalid: 'throw' }) // throw on invalid usages