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

Question

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

这就是我必须更改的所有内容:

来自

.footerclass {
background-color: transparent;
}

到

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

这是结果:

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

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

Answer 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);
}