不透明度與 CSS 過濾器

當我們在圖像上放置文字時，我們總是面臨可讀性的問題。

我經常使用不透明度來修正這個問題。還有 CSS Filter 屬性及其許多效果。

預設情況下，我認為後者提供比不透明度更定性的渲染。但我想澄清一下。

具有不透明度

這很容易。我們向父元素添加背景顏色並使用圖像的不透明度屬性。

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

.element-image {
  opacity: 0.7;
}

帶 CSS 過濾器

過濾器屬性可讓您套用濾鏡或圖形效果。
此屬性提供以下濾鏡：模糊、亮度、對比、陰影、灰階、色調旋轉、反轉、不透明度、飽和度和棕褐色。

這裡我有興趣的濾鏡是亮度。
它甚至比不透明更容易。我們將濾鏡屬性應用於影像元素。

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

結果

我做了一個codepen來比較。
左邊是不透明版本，右邊是濾鏡版本。
比賽結果，我沒有看到任何差異！

因此，如果您想知道要使用哪種解決方案，我告訴您這就像 voulvoul。最適合你的。

以上是不透明度與 CSS 過濾器的詳細內容。更多資訊請關注PHP中文網其他相關文章！