contrast()
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2016年9月.
contrast() CSS 函数调整输入图像的对比度。结果是一个 <filter-function>.
尝试一下
filter: contrast(1);
filter: contrast(1.75);
filter: contrast(50%);
filter: contrast(0);
<section id="default-example">
<img
class="transition-all"
id="example-element"
src="/shared-assets/images/examples/firefox-logo.svg"
width="200" />
</section>
语法
contrast(amount)
参数
amount-
输出的对比度取决于
<number>或者<percentage>的大小。低于100%的值会降低对比度，高于100%的值会增加对比度。值为0%将创建完全灰色的图像，值为100%时不会有任何变化。该值为空时默认为1.
例子
css
contrast(0) /* 完全灰色 */
contrast(65%) /* 65% 对比度 */
contrast(1) /* 无效果 */
contrast(200%) /* 两倍对比度 */