Css 为横幅文本提供透明背景

Css 为横幅文本提供透明背景,css,fonts,web,background-color,Css,Fonts,Web,Background Color,我目前正在使用一个名为Bedford的Squarespace 6模板。我附上了一个横幅图片文本的截图,我正试图让它更加突出。我想添加一个黑色透明的背景,并使文本白色类似于下面的两个按钮 该网站的链接是 我在下面添加了自定义css,但它也在下面的按钮中添加了样式 更新: 我试图给我的横幅文字,其中说“你的首要来源为油田运输”的背景颜色:rgba(0,0,0,9); 有没有办法用CSS来实现这一点 感谢您的帮助您需要的只是: background-color: rgba(0, 0, 0, .8);

我目前正在使用一个名为Bedford的Squarespace 6模板。我附上了一个横幅图片文本的截图,我正试图让它更加突出。我想添加一个黑色透明的背景,并使文本白色类似于下面的两个按钮

该网站的链接是

我在下面添加了自定义css,但它也在下面的按钮中添加了样式

更新:

我试图给我的横幅文字,其中说“你的首要来源为油田运输”的背景颜色:rgba(0,0,0,9); 有没有办法用CSS来实现这一点


感谢您的帮助

您需要的只是:

background-color: rgba(0, 0, 0, .8);
z-index: 1000; 
Z索引可以是大于后台Z索引的任何值。如果你没有在其他地方使用过它,它的效果与1或9999相同

最后一个“.8”是透明度,它是从0.0到1.0的值,其中0不可见,1完全可见

但是当看到这一点时,我认为你想要的效果包含在
中,这是一幅占据整个屏幕宽度的图像


在这一点上,我不能给你任何更好的建议,因为我不知道你到底想要什么。尝试提供代码,说明您已经完成了哪些工作,哪些工作不符合您的要求。

好的,因此要仅使用CSS完成此工作,而不更改HTML或使用JS,您可以将其添加到自定义CSS中:

.desc-wrapper > p:nth-child(1) {
  background-color: rgba(0, 0, 0, 0.9);
}

这将只针对第一个
元素,希望这是您所需要的。

您可以用html为带有文本的
p
元素提供一个横幅ID,例如,

并在css中使用
#banner
。我不明白您为什么要在100%黑色文本下面添加90%黑色,没有人能读到。你在找文字阴影吗?对不起,我忘了把字体改成白色。现在你可以看到我的问题以及我为什么要添加背景色了