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