CSS背景图像不透明度？答案

【问题标题】：CSS background-image-opacity?CSS背景图像不透明度？
【发布时间】：2011-10-16 22:35:20
【问题描述】：

与How do I give text or an image a transparent background using CSS?相关，但略有不同。

我想知道是否可以更改背景图像的 alpha 值，而不仅仅是颜色。显然我可以用不同的 alpha 值保存图像，但我希望能够动态调整 alpha。

到目前为止，我得到的最好的是：

<div style="position: relative;">
    <div style="position: absolute; left: 0px; right: 0px; top: 0px; bottom: 0px;
                      background-image: url(...); opacity: 0.5;"></div>
    <div style="position: relative; z-index: 1;">
        <!-- Rest of content here -->
    </div>
</div>

它可以工作，但它笨重且丑陋，并且在更复杂的布局中搞砸了。

【问题讨论】：

背景图片后面是什么？纯色还是其他图像？
@Eric：我不是指任何具体案例，我正在尝试找到解决问题的一般方法。
@Kolink：我正在考虑一个需要淡化背景图像的场景。
嗯，我开发在线浏览器游戏，我想做一些动画需要这个可变不透明度背景图像。
css-tricks.com/snippets/css/transparent-background-images

标签： html css

【解决方案1】：

您无法通过 CSS 编辑图像。我能想到的唯一解决方案是编辑图像并更改其不透明度，或者制作具有所有所需不透明度的不同图像。

【讨论】：

这是更直接的答案，如果我们忘记了 OP 提供了一个“替代方案”，但考虑到他后来评论说他“不想提供一个例子”（提供一个替代方案）。所以考虑到他只是想要答案，这里是:)

【解决方案2】：

如果背景不必重复，您可以使用精灵技术（滑动门）将所有具有不同不透明度的图像放在一个（彼此相邻），然后使用@987654323 将它们移动@。

如果您的目标浏览器支持multiple backgrounds（Firefox 3.6+、Safari 1.0+、Chrome 1.3+、Opera 10.5+、Internet Explorer 9+），您也可以多次声明相同的部分透明背景图像。这些多张图像的不透明度应该加起来，您定义的背景越多。

这个组合透明胶片的过程称为Alpha Blending，计算方式为（感谢@IainFraser）：

αᵣ = α₁ + α₂(1-α₁) 其中α 介于 0 和 1 之间。

【讨论】：

对多背景技术的一个警告是，不透明度会相乘而不是相加。如果叠加两张不透明度为 50% 的图像，则结果将是一张不透明度为 75% 的图像。再添加一个，不透明度跳到 87.5%，再增加一个 93.75%。从数学上讲，总不透明度接近，但实际上从未达到 100%。但在实践中，由于四舍五入，您需要堆叠 9 才能将 50% 的不透明度图像提高到 100%。
对于那些有数学倾向的人，这里是你如何计算向堆栈添加另一个半透明图像会对整体不透明度产生什么影响：stacked_opacity = current_opacity+((1-current_opacity)*single_opacity) 所以如果我们当前的不透明度是 0.25，添加另一个图像将因此，给我们 0.4375； 0.25+((1-0.25)*0.25) = 0.4375 添加另一个将给我们 0.578125，因此； 0.4375+((1-0.4375)*0.25) = 0.578125

【解决方案3】：

您可以使用 CSS 生成的内容来处理褪色背景

http://jsfiddle.net/gaby/WktFm/508/的演示

HTML

<div class="container">
        contents
</div>

CSS

.container{
    position: relative;
    z-index:1;
    overflow:hidden; /*if you want to crop the image*/
}
.container:before{
    z-index:-1;
    position:absolute;
    left:0;
    top:0;
    content: url('path/to/image.ext');
    opacity:0.4;
}

但是您不能修改不透明度，因为我们不允许修改生成的内容..

您可以使用类和 css 事件来操作它（但不确定它是否符合您的需求）

例如

.container:hover:before{
    opacity:1;
}

更新

您可以使用 css 过渡来为不透明度设置动画（再次通过类）

http://jsfiddle.net/gaby/WktFm/507/ 上的演示

添加

-webkit-transition: opacity 1s linear;
-o-transition: opacity 1s linear;
-moz-transition: opacity 1s linear;
transition: opacity 1s linear;

.container:before 规则将使不透明度在一秒钟内变为 1。

兼容性

FF 5（也可能是 4，但没有安装。）
IE 9 失败..
基于 Webkit 的浏览器失败（Chrome 现在支持它 v26 - 也可能是早期版本，但刚刚检查了我当前的版本），但他们知道并正在努力解决它 (https://bugs.webkit.org/show_bug.cgi?id=23209)李>

.. 所以目前只有最新的 FF 支持它.. 但是一个好主意，不是吗？ :)

【讨论】：

在 FF5 中对我来说看起来很不错，干得好。我完全忘记了伪元素具有url 属性，我尝试使用background 并无法解决z-index 问题（下面的内容）。
Answer 赞赏，但考虑到 Firefox 在其他方面的表现如何（到处都是内存泄漏，JS 可怕的滞后，它几乎和 IE6 一样慢，当然比 IE7 慢......）我会正在寻找更跨浏览器的解决方案。
@WesleyMurch，我可以请你在stackoverflow.com/questions/14137378/…看一个关于不同主题的 css ， jquery 问题

【解决方案4】：

您可以在希望设置透明背景的元素内放置第二个元素。

<div class="container">
    <div class="container-background"></div>
    <div class="content">
         Yay, happy content!
    </div>
</div>

然后让'.container-background'绝对定位以覆盖父元素。此时，您将能够调整它的不透明度，而不会影响“.container”内内容的不透明度。

.container {
    position: relative;
}
.container .container-background {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: url(background.png);
    opacity: 0.5;
}
.container .content {
    position: relative;
    z-index: 1;
}

【讨论】：

这不是和我在问题中使用的“hack”完全一样吗？
嗯...我想，但我不明白什么不适合你。我用这个方法，效果很好。
这完全是你的黑客，但因为你不愿意提供一个例子并且你的评论“@Eric：我不是指任何具体案例，我试图找到问题的一般解决方案“您似乎很清楚自己想要的不是黑客或可能适用于某些情况的解决方法（尽管您提供了一种解决方法），而是无论是否可能的简单答案。 所以正确的答案是“不，根据当前的 CSS 规范是不可能的”。 您的问题似乎是一些布局结果对您来说“复杂”。这个答案为您消除了复杂性。
我的意思与 OP 示例完全相同。

【解决方案5】：

试试这个技巧 .. 使用带有 (inset) 选项的 css 阴影，并以 200px 为例

代码：

box-shadow: inset 0px 0px 277px 3px #4c3f37;

.

也适用于所有浏览器：

-moz-box-shadow: inset 0px 0px 47px 3px #4c3f37;
-webkit-box-shadow: inset 0px 0px 47px 3px #4c3f37;
box-shadow: inset 0px 0px 277px 3px #4c3f37;

并增加数字以填充您的框:)

享受吧！

【讨论】：

这不适用于 OP 想要的，但完美地满足了我的要求，谢谢！！
@rozzA OP 没有说明背景中有另一个图像。实际上他只是想知道是否可以改变背景的不透明度，并回答：“NO”。这是一个不错的方法 :) 但与添加具有 rgba 透明度的新背景没有什么不同。

【解决方案6】：

.class {
    /* Fallback for web browsers that doesn't support RGBa */
    background: rgb(0, 0, 0);
    /* RGBa with 0.6 opacity */
    background: rgba(0, 0, 0, 0.6);
}

复制自：http://robertnyman.com/2010/01/11/css-background-transparency-without-affecting-child-elements-through-rgba-and-filters/

【讨论】：

也许我不够清楚。我希望使背景 image 部分透明。
@NiettheDarkAbsol 您很清楚您不想要“解决方法”，但提供了一个示例并且知道答案是“不，您不能”。因此，此示例适用于图像背后有纯色背景的场景（您没有给出而是拒绝）。只需在图像顶部添加另一个背景，rgba 与背景颜色匹配。 “效果”是您的图像看起来是透明的。你应该高兴地接受答案或打开另一个问题，因为这个问题已经用“不，你不能”解决了
@sergio 这个答案告诉我如何使背景 color 部分透明。这很好，除了问题——正如我所说——是关于背景图像。
我当然希望我可以在 SO 上搜索东西，而不必像这样随机阅读肮脏的东西。

【解决方案7】：

#id {
  position: relative;
  opacity: 0.99;
}

#id::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: -1;
  background: url('image.png');
  opacity: 0.3;
}

不透明度为 0.99（小于 1）的 Hack 创建 z-index 上下文，因此您不必担心全局 z-index 值。（尝试删除它，看看在下一个演示中父包装器具有正 z-index 时会发生什么。）
如果你的元素已经有了 z-index，那么你就不需要这个 hack。

Demo.

【讨论】：

@bjb568 是的，这是我的第一个想法。但它并不能真正用作半透明背景，而是充当半透明前景。尝试在块内添加图像或将文本颜色更改为背景颜色（白色），您会看到。
@bjb568 是的，在您的示例中，您可以在内部图像上看到应该作为背景。尝试增加“背景”元素的不透明度，你会看到内部图像是如何消失的。
@bjb568 你有没有想过为什么你必须添加no-repeat？你认为你的版本没问题，因为元素是固定大小的，等于 bg 图像大小，并且因为你没有任何带背景的父元素（背景颜色就足够了）。
@bjb568 我给出了详尽的例子。如果您认为它有冗余，请从它开始 并尝试删除任何内容。你会看到每个参数都有它的位置。如果您认为您找到了另一个技术，请将其发布为另一个答案。
我想知道。我也可以在没有奇怪的黑客的情况下做到这一点。不重复是为了……它不重复。好的。那么，另一个答案。

【解决方案8】：

这是使用 CSS 设置渐变和透明度的另一种方法。不过，您需要稍微调整一下参数。

background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(0, 0, 0, 0)), color-stop(100%, transparent)),url("gears.jpg"); /* Chrome,Safari4+ */
background-image: -webkit-linear-gradient(top, transparent, transparent),url("gears.jpg"); /* Chrome10+,Safari5.1+ */
background-image:    -moz-linear-gradient(top, transparent, transparent),url("gears.jpg"); /* FF3.6+ */
background-image:     -ms-linear-gradient(top, transparent, transparent),url("gears.jpg"); /* IE10+ */
background-image:      -o-linear-gradient(top, transparent, transparent),url("gears.jpg"); /* Opera 11.10+ */
background-image:         linear-gradient(to bottom, transparent, transparent),url("gears.jpg"); /* W3C */

【讨论】：

【解决方案9】：

body {
  ' css code that goes in your body'
}

body::after {
  background: url(yourfilename.jpg);
  content: "";
  opacity: 0.6;
  position: fixed;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  z-index: -1;   
  width:auto;
  height: 100%;
  }

所以说它的 body::after 你正在寻找。这样，您的身体代码不会更改或仅更改您可以在必要时进行更改的背景。

【讨论】：

【解决方案10】：

试试这个

<div style="background: linear-gradient( rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7) ), url(/image.png);background-repeat: no-repeat;  background-position: center;"> </div>

【讨论】：

希望看到线性渐变保持原位，即使您更改背景位置。
耶！那是唯一真实的！仅基于 css，不涉及任何其他 html 标签。
哇哦！花了几个小时在谷歌上搜索才找到这个——非常感谢你发帖。我想要一个白色的覆盖/透明度而不是黑色，所以我将rgba(0, 0, 0, 0.7) 更改为rgba(255, 255, 255, 0.7)。而且它只影响背景而不是整个元素^__^

【解决方案11】：

我用它，我在白色背景上测试过，但是它可以与背景颜色匹配，尤其是如果使用css var：

background: #ececec99;
background-blend-mode: lighten;
background-image: url(images/background-1.jpg);
background-repeat: no-repeat;
background-size: cover;
background-position: center;

需要注意的是，我只在 Chrome 浏览器中检查了这一点。

【讨论】：

【解决方案12】：

要设置背景图像的opacity，您只需在background-image 集合中添加一个不透明图像作为第一张图像。

解释：

渐变功能正在根据颜色创建图像
rgba 函数正在创建一种接受不透明度作为参数（即 alpha 参数）的颜色
白色的alpha = 1 - opacity
因此，通过组合它们，您可以创建不透明的图像。

例如，您可以通过在background-image 集合中添加以下图像linear-gradient(to right, rgba(255,255,255, 0.7) 0 100%) 来添加0.3 中的opacity

opacity 的 0.3 示例

body{
  background-image: linear-gradient(to right, rgba(255,255,255, 0.7) 0 100%), url(https://images.unsplash.com/photo-1497294815431-9365093b7331?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1950&q=80);
  background-size: cover;
}

享受吧！

Credits

【讨论】：

这不是不透明度，它只是在图像顶部覆盖白色半透明颜色。这仅在图像背后的背景颜色为纯色时才有用

【解决方案13】：

您可以使用 hack 来实现滤镜效果。之前提到的一些用户，但除了这个解决方案之外，他们的答案都不适合我

#item_with_background {
    background: rgb(filter_color) url(...)
}

#item_with_background > * {
    position: relative;
    z-index: 1; // this may cause other problems if you have other elements with higher than 1 z-index. so use with caution.
}

#item_with_background::before {
    content: ' ';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(filter_color, 0.9);
    width: 100%;
    height: 100%;
    z-index: 0;
}

Here is a working example

【讨论】：