使用CSS设置背景覆盖物的透明度

Question

以下是设置背景封面的代码，我想设置背景封面的透明度，以便可以在其上显示一些文本。我已经得到以下解决方案，但它对我不起作用。我不知道自己错在哪里。

```css background-color: rgba(255, 255, 255, 0.5); ``` 请注意，其中0.5的值表示透明度，范围从0到1。

 style="background: url(images/football_ground.jpg) no-repeat center center fixed;-webkit-         
     background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;-moz-opacity:.30; 
filter:alpha(opacity=30); 
-khtml-opacity: 0.3;  ">

- user1918034

---

你在检查哪个浏览器？ - Hary

Answer 1

目前，CSS不允许改变背景图片的alpha值。如果您想解决这个问题，有几种不同的选择：

1. 将背景图片保存为透明的png文件，以达到所需的透明度。
2. 将背景图片作为相对定位父容器中自己的绝对定位元素。

.

<div class="parent">
    <div class="background"></div>
    <div class="foreground">some text</div>
</div>

- Kyle

Answer 2

CSS的opacity属性设置整个元素的透明度，而不仅仅是背景。因此您的代码实际上将背景和文本内容的透明度都设置为0.30。

要达到您想要的效果，您可能需要使用2个元素。

- jgthms

---

你的意思是背景覆盖和文本使用不同的元素吗？ - user1918034

是的。看看Kyle的回答。 - jgthms

Answer 3

不透明度会影响元素及其子元素。

您无需将其拆分为两个元素，只需使用 RGB 来实现透明度。 第四个参数 alpha 用于设置元素的透明度：

background-color: rgba(0, 0, 0, 0.75);

- dcastro

Answer 4

现在我们的要求是，图片需要一个更暗的覆盖层，这样放置在图片上的白色文本就可以更加清晰可见 - 当背景图像比较白的时候。

我通常使用元素来实现这个目的，但另一种解决方案可能是将其添加到父元素的 CSS（或任何需要的位置）中：

background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url("./your_image_url");

可能有更短的方法，但在某些地方我一直在使用上述方法。

- Fred