不透明度与 CSS 过滤器

当我们在图像上放置文本时，我们总是面临可读性的问题。

我经常使用不透明度来纠正这个问题。还有 CSS Filter 属性及其许多效果。

默认情况下，我认为后者提供比不透明度更定性的渲染。但我想澄清一下。

具有不透明度

这很容易。我们向父元素添加背景颜色并使用图像的不透明度属性。

.element-parent {
  background-color: #000;
}

.element-image {
  opacity: 0.7;
}

带 CSS 过滤器

过滤器属性允许您应用过滤器或图形效果。
此属性提供以下滤镜：模糊、亮度、对比度、阴影、灰度、色调旋转、反转、不透明度、饱和度和棕褐色。

这里我感兴趣的滤镜是亮度。
它甚至比不透明更容易。我们将滤镜属性应用于图像元素。

.element-image {
  filter: brightness(0.7);
}

结果

我做了一个codepen来比较。
左边是不透明版本，右边是滤镜版本。
比赛结果，我没有看到任何差异！

因此，如果您想知道使用哪种解决方案，我告诉您这就像 voulvoul。最适合你的。

以上是不透明度与 CSS 过滤器的详细内容。更多信息请关注PHP中文网其他相关文章！