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值。如果你想解决这个问题，有几种不同的选择：

只需将背景图像保存为相应不透明度的透明png。
将背景图像设置为相对定位的父容器中的绝对定位元素。

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

Answer 2

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

您可能需要使用2个元素来实现您想要的效果。

Answer 3

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

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

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

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

甚至可能有更短的方法，但是我在某些地方使用了上面的方法。

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

4 个答案: