3

下面是设置背景封面的代码，我想设置背景封面的透明度，这样我就可以在上面显示一些文字。我得到了如下解决方案，但它对我不起作用。我没有得到我想念它的地方。

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

4 回答 4

4

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

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

.

<div class="parent">
    <div class="background"></div>
    <div class="foreground">some text</div>
</div>
于 2013-01-26T14:44:59.187 回答
3

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

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

于 2013-01-26T14:40:21.147 回答
0

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

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

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

于 2013-01-26T15:25:32.710 回答
0

现在达到这一点，我们的要求是图像需要更暗的封面，以便放置在图像顶部的白色文本可以更明显 - 在背景图像更白的情况下。

我总是使用元素来实现这一点，但另一种解决方案可能是将其添加到父元素的 css（或任何你需要的地方）：

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

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

于 2020-06-02T13:46:09.753 回答