使CSS背景图像变暗而不会使透明卡面板下的区域变暗

时间:2017-03-28 07:51:26

标签: css materialize

我的网页包含背景图片和顶部的透明卡片面板。是否可以在保持透明卡面板下方区域亮度相同的同时使背景图像变暗?

1 个答案:

答案 0 :(得分:0)

取决于您通常可以使用卡的位置和形状。我应该做的是: - 为具有背景图像的HTML元素创建伪元素

- 拉伸伪元素以适合父元素的整个区域

- 确保伪元素保留在您案例中的父内容(卡片)下

- 使用线性渐变为其添加背景,使伪元素看起来更暗。

通过使用线性渐变,您可以控制背景图像的哪个部分看起来比另一个部分更暗,您不希望看起来更暗的部分应该线性 - 渐变值为透明。对于正常的形状/位置,这种技术大部分时间都可以正常工作,但是它有自己的限制。我留给你研究如何使用它们。

如果您不熟悉这些术语和技巧,我会在下面添加几个链接:

伪元素: https://www.w3schools.com/css/css3_gradients.asp

线性渐变作为背景: https://www.w3schools.com/css/css3_gradients.asp