CSS背景图透明度？

Question

这篇问题与如何使用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>

它可以工作，但是它很笨重、丑陋，并且在更复杂的布局中会搞乱事情。

- Niet the Dark Absol

---

背景图像的后面是什么？是纯色还是另一张图片？ - Eric

@Kolink：我正在尝试想象一个需要淡化背景图片的场景。 - Eric

不妨尝试将您的背景图像设为透明，而不是通过CSS3来实现它 :) - Anonymous

@zeroriku "显然我可以使用不同的alpha值保存图像，但我希望能够动态调整alpha。" - Niet the Dark Absol

http://css-tricks.com/snippets/css/transparent-background-images/ - Lord Varlin

Answer 1

您可以使用CSS生成的内容来实现淡化背景。

演示在http://jsfiddle.net/gaby/WktFm/508/。 HTML

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

CSS (Cascading Style Sheets)

.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支持它.. 是不是很棒呢？ :)

- Gabriele Petrioli

---

在FF5中看起来非常不错，干得好。我完全忘记了伪元素有url属性，我尝试使用background但无法解决z-index问题（内容位于下方）。 - Wesley Murch

感谢您的回答，但考虑到Firefox在其他方面表现如此糟糕（到处都是内存泄漏，JS运行非常缓慢，几乎和IE6一样慢，肯定比IE7慢...），我将寻找更跨浏览器的解决方案。 - Niet the Dark Absol

@WesleyMurch，能否请您看一下关于CSS、jQuery的问题，链接在http://stackoverflow.com/questions/14137378/div-above-another-div-but-should-scroll-beneath-the-later-one，但是这个问题与当前讨论的话题不同。 - Istiaque Ahmed

Answer 2

.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/

本文介绍如何使用CSS中的RGBA和滤镜属性设置背景透明度，同时不影响其子元素。

- Andy.Diaz

---

或许我表述不够清晰。我想将一张背景图像部分透明化。 - Niet the Dark Absol

@NiettheDarkAbsol，你很清楚地表明你不想要一个“变通方法”，但是提供了一个例子并且知道答案是“不行”。所以这个例子适用于场景（你没有给出但却拒绝了）：在你的图像背后有一个坚实的背景。只需在你的图像上方添加另一个背景，rgba与背景颜色相匹配。这样做的“效果”是你的图像看起来是透明的。 你应该开心地接受答案或者开一个新问题，因为这个问题已经被解决了，“不行”。 - sergio

这个回答告诉我如何使背景颜色部分透明。这很好，但是问题——就像我所说的——是关于背景图像的。 - Niet the Dark Absol

我真希望在 Stack Overflow 上搜索东西时，不必像这样随机阅读令人不快的内容。 - Glenn Maynard

Answer 3

试试这个

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

- JM Causing

---

希望看到线性渐变保持在原位，即使更改背景位置。 - klewis

耶！那是唯一正确的！仅基于CSS，没有涉及任何其他HTML标签。 - Despertaweb

哇！我花了好几个小时在谷歌上搜索才找到这个，非常感谢您的发布。我想要一个白色的叠加/透明度而不是黑色，所以我将 rgba(0, 0, 0, 0.7) 更改为 rgba(255, 255, 255, 0.7)。它只影响背景而不是整个元素 ^__^ - velkoon

Answer 4

如果背景不需要重复，您可以使用精灵技术（滑动门），将所有不同不透明度的图像放入一个图像中（相互靠在一起），然后使用 background-position 将它们移动到正确的位置。

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

合并透明度的过程称为Alpha Blending，计算方法为（感谢@IainFraser）： αᵣ = α₁ + α₂(1-α₁)其中 α 范围在0到1之间。

- DanMan

---

多重背景技术的一个注意事项是透明度会相乘而不是相加。如果你叠加两个50%透明度的图像，结果将会是一个75%透明度的图像；再添加一个，透明度会跳到87.5%， 再添加一个，透明度会变成93.75%。数学上，总透明度会趋近于但实际上永远不会达到100%。然而在实践中，由于四舍五入的原因，你需要叠加9个才能将50%透明度的图像变为100%。 - Iain Fraser

对于数学倾向的人，以下是如何计算将另一个半透明图像添加到堆栈中会对整体不透明度产生什么影响的方法： 堆叠的不透明度 = 当前不透明度 + ((1-当前不透明度)*单个不透明度)因此，如果我们当前的不透明度为0.25，则添加另一张图像将使我们的不透明度为0.4375，即； 0.25 + ((1-0.25)*0.25) = 0.4375再添加一张图像将使我们的不透明度为0.578125，即； 0.4375 + ((1-0.4375)*0.25) = 0.578125 - Iain Fraser

Answer 5

尝试这个技巧...使用带有（内嵌）选项的CSS阴影，并将深度设置为200像素，例如

代码：

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;

并增加数量来填满您的盒子 :)

享受吧！

- Saud Alfadhli

---

这个不能满足原帖作者的需求，但完美地满足了我的需求，谢谢！！ - RozzA

@rozzA，楼主没有说明背景中还有另一张图片。实际上，他只是想知道是否可以更改背景的不透明度，并回答：“不行”。这是一个不错的方法 :) 但与添加具有rgba透明度的新背景没有区别。 - sergio

Answer 6

要设置背景图像的不透明度，您只需将一个不透明的图像添加为背景图像集中的第一张图像。

说明：

• 渐变函数从颜色创建图像
• rgba函数创建接受不透明度作为参数的颜色（即alpha参数）
• alpha = 1 - opacity 的白色
• 因此，结合它们，您可以创建一个不透明的图像。

例如，您可以通过将以下图像linear-gradient(to right, rgba(255,255,255, 0.7) 0 100%) 添加到background-image集中来添加opacity为0.3的不透明度。

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

享受！

来源

- gerardnico

---

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

Answer 7

您可以将第二个元素放在您希望具有透明背景的元素内。

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

- Alex K

---

这不是我在问题中使用的“hack”完全相同吗？ - Niet the Dark Absol

嗯...我想是吧，但我不明白你遇到了什么问题。我使用这种方法，它非常有效。 - Alex K

这与你的黑客方式完全相同，但由于你不愿提供示例并通过你的评论“@Eric：我没有针对任何特定情况，我试图找到问题的通解。”你似乎清楚自己想要的不是某些场景下可能有效的黑客或解决方法（尽管你提供了一个），而是明确的答案，无论它是否可能。因此，正确的答案是“否，根据当前的CSS规范，这是不可能的”。你的问题似乎是一些布局对你来说过于“复杂”。这个答案为你简化了它。 - sergio

我指的是与原帖示例完全相同。 - sergio

Answer 8

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

- Cokegod

---

这是一个比较直接的答案，如果我们忘记了原始问题提供了一个“替代方案”，但是考虑到他后来评论说他“不想提供示例”（以提供替代方案），那么我们只需要考虑他想要的回答即可。所以，以下就是答案 :) - sergio

Answer 9

这是另一种使用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 */

- Stanislav

Answer 10

你可以使用一个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;
}

这里是一个可运行的示例

- Pars