使用css设置背景封面的透明度

Question

下面是设置背景封面的代码，我想设置背景封面的透明度，这样我就可以在它上面显示一些文本。我得到了下面的解决方案，但它对我不起作用。我不明白我错过了什么。

 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;  ">

Answer 1

目前，CSS不允许更改背景图像的alpha值。如果您希望解决此问题，有几个不同的选项：

1. 只需将您的背景图像保存为适当不透明度的透明png。
2. 使背景图像成为其在相对定位的父容器中的绝对定位元素。

。

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

Answer 2

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

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

Answer 3

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

你不需要将它分成两个元素，只需使用RGB来实现透明度。第四个参数alpha设置元素的透明度：

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