自定义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);
}