PostCSS 图像函数

npm install @csstools/postcss-image-function --save-dev

PostCSS 图像函数 使您可以轻松地从任何颜色中生成固态图像 CSS 图像 4 规格。 。 。 .

.foo {
    background-image: image(transparent);
}

.foo {
    --bg-image: image(transparent);
}

/* becomes */

.foo {
    background-image: linear-gradient(transparent,transparent);
}

.foo {
    --bg-image: linear-gradient(transparent,transparent);
}

使用量

添加 PostCSS 图像函数 对您的项目:

npm install postcss @csstools/postcss-image-function --save-dev

当作一个 邮政 插件 :

const postcss = require('postcss');
const postcssImageFunction = require('@csstools/postcss-image-function');

postcss([
    postcssImageFunction(/* pluginOptions */)
]).process(YOUR_CSS /*, processOptions */);

选项

保护

这个 preserve 选项决定原始标记是否 被保存下来。 默认情况下,它没有被保存.

postcssImageFunction({ preserve: true })

.foo {
    background-image: image(transparent);
}

.foo {
    --bg-image: image(transparent);
}

/* becomes */

.foo {
    background-image: linear-gradient(transparent,transparent);
    background-image: image(transparent);
}

.foo {
    --bg-image: linear-gradient(transparent,transparent);
}

@supports (background-image: image(red)) {
.foo {
    --bg-image: image(transparent);
}
}