自定义CSS在图像上制作透明层？

Posted 2023-03-06

【中文标题】自定义CSS在图像上制作透明层？

【英文标题】：Custom CSS to make a transparent layer over an image?

【发布时间】：2016-03-03 14:08:37

【问题描述】：

我目前正在开发一个学校网站，我想在该网站的页脚中使用某个图片。该图像使文本难以阅读，因此我的解决方案是制作一个透明的覆盖层，如果有意义的话，它会稍微不透明。到目前为止，我只是在 Firefox 检查器中更改了容器的背景颜色，并且它已经工作了，但显然这只是在我的浏览器中。

这就是我必须改变的全部：

来自

.footerclass 
background-color: transparent;

到

.footerclass 
background-color: rgba(0, 0, 0, 0.33);

这是结果：

但是当我进入我的 Wordpress 仪表板中的自定义 CSS 字段并添加它时，它什么也没做。我在想当我这样做时我没有选择正确的选择器，或者其他什么。我对网站设计比较陌生，所以如果我表现得无知，我很抱歉。任何帮助将不胜感激。

如果您想自己检查该页面的链接是www.bightbanquets.com/

【问题讨论】：

您的规则没有被浏览器呈现，我在源代码中找到的最接近的值为 .22，它后面有一个额外的括号（它很难阅读，但我假设它在媒体查询？）。它是正确的选择器，但有时取决于规则出现的位置，您可能需要额外的特异性，例如#containerfooter.footerclass ..

太棒了，成功了！非常感谢先生。

【参考方案1】：

试试这个：

.footerclass 
    position: relative;

.footerclass:before 
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: rgba(0,0,0,0.3);