CSS background-image-opacity？

79

与如何使用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>

它可以工作，但是又笨重又丑陋，并且在更复杂的布局中使事情变得混乱。

html  css 
— Niet the Dark Absol
source
1
背景图片背后是什么？是纯色还是其他图像？
— 埃里克（Eric）
@Eric：我没有在此提及任何具体情况，而是试图找到解决该问题的一般方法。
— Niet the Dark Absol 2011年
1
@Kolink：我正在尝试一种需要褪色背景图像的场景。
— 艾瑞克（Eric）
好吧，我开发了在线浏览器游戏，并且我想在动画中做一些事情，这些事情需要这种不透明度可变的背景图片。
— Niet the Dark Absol 2011年
1
— Lord Varlin

Answers:

16

如果不需要重复背景，则可以使用Sprite技术（滑动门），将所有具有不同不透明度的图像放在一起（彼此相邻），然后使用来移动它们background-position。

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

— 丹曼
source
10
多背景技术的一个警告是，混浊会增加而不是加在一起。如果叠加两张不透明度为50％的图像，结果将为一张不透明度为75％的图像。再加上一个，不透明度跃升至87.5％，另一个达到93.75％。在数学上，总不透明度接近，但实际上从未达到100％。但实际上，由于四舍五入，您需要堆叠9才能将不透明度为50％的图像转换为100％。
— 伊恩·弗雷泽
3
对于那些有数学倾向的人，这是您计算出如何向堆栈中添加另一个半透明图像对整体不透明度的影响：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
— 伊恩·弗雷泽
45

您可以使用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支持它。.但是一个好主意，不是吗？:)

— 加布里埃莱·彼得里奥利（Gabriele Petrioli）
source
1
在FF5中对我来说看起来不错，干得好。我完全忘记了伪元素具有url我尝试使用的属性，background但无法解决z-index问题（下面的内容）。
— 韦斯利·默奇
答案令人赞赏，但考虑到Firefox在其他方面的表现不佳（到处都是内存泄漏，JS的严重滞后，它几乎与IE6一样慢，当然比IE7还要慢...）我将寻找一个跨浏览器解。
— Niet the Dark Absol 2011年
@WesleyMurch，我可能会要求你有在看一个CSS，jQuery的问题在不同的主题stackoverflow.com/questions/14137378/...
— Istiaque艾哈迈德
24 
.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/

— 安迪·迪亚兹
source
9
也许我还不够清楚。我希望使背景图像部分透明。
— Niet the Dark Absol 2013年
@NiettheDarkAbsol您很清楚您不需要“解决方法”，但是提供了一个示例，并且知道答案是“ NO YOU CANT'T”。因此，此示例适用于场景（您没有给出但拒绝）的情况，在这种情况下，您的图像后面有坚实的背景。只需在图像顶部添加另一个背景，使rgba与背景色匹配。“效果”是您的图像看起来透明。您应该高兴地接受答案或打开另一个问题，因为已经用“不，您不能”解决了这个问题
— sergio 2014年
2
@sergio这个答案告诉我如何使背景颜色部分透明。很好，除了我所提到的问题是关于背景图像的问题。
— Niet the Dark Absol 2014年
13

尝试这个技巧..使用css shadow with（inset）选项并以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;

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

请享用！

— 沙特·阿尔法迪（Saud Alfadhli）
source
1
这不能满足OP的需求，但完全可以满足我的要求，谢谢！
— RozzA
@rozzA OP未声明背景中还有其他图像。实际上，他只想知道是否可以更改背景的不透明度，然后回答：“否”。这是一种不错的方法:)，但与添加具有rgba透明度的新背景没有区别。
— sergio
6

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

<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;
}
— 亚历克斯·K
source
这与我在问题中使用的“ hack”完全不同吗？
— Niet the Dark Absol
1
嗯...我想，但是我不明白什么对你不起作用。我使用这种方法，效果很好。
— Alex K
1
确实是您的骇客，但由于您不愿提供示例，并因您的评论“ @Eric：我没有在此提及任何具体情况，因此我试图找到解决该问题的一般方法”在您想要的东西上似乎不是很明确，但不是针对某些情况（尽管您提供了一种）的hack或解决方法，而是一个简单的答案，即是否可能。 因此正确的答案是“不，根据当前的CSS规范，这是不可能的”。 您的问题似乎是某些布局结果对您而言“复杂”。这个答案为您简化了它。
— sergio 2014年
我的意思完全是作为OP示例。
— sergio
2

试试这个

<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原因
source
即使您更改背景位置，也希望看到线性渐变保持在原位。
— klewis
1

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

— 可可果
source
如果我们忘记了OP提供的“替代方案”，那么这是更简单的答案，但是考虑到他稍后评论说他“不想提供示例”（提供替代方案）。因此，考虑到他只想要答案，这里是:)
— sergio
1 
#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索引为正。）
如果您的元素已经具有z索引，那么您不需要此技巧。

演示。

— 用户
source
@ bjb568是的，那是我的第一个想法。但是，它实际上并不能用作半透明背景，而是可以用作半透明前景。尝试在块内添加图像或将文本颜色更改为背景颜色（白色），您将看到。
— 用户
@ bjb568是的，在您的示例中，您可以在内部图像上看到应该是背景的图像。尝试增加“背景”元素的不透明度，您将看到内部图像如何淡出。
— 用户
@ bjb568您是否曾经想过为什么必须添加no-repeat？您认为您的版本还可以，因为该元素的固定大小等于bg图像大小，并且因为您没有任何带有背景的父元素（background-color就足够了）。
— 用户
@ bjb568我举了完整的例子。如果您认为它具有冗余性，请从它开始并尝试删除所有内容。您会看到每个参数都有它的位置。如果您认为找到了另一种技术，请将其发布为另一种答案。
— 用户
我想知道。我也可以做到这一点而无需怪异的技巧。不重复是为了……它不会重复。好的。那么，另一个答案。
— bjb568 2014年
1

这是使用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 */
— 斯坦尼斯拉夫
source
-1 
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%;
  }

所以说它的身体：：寻找之后。这样，您的身体代码不会更改或仅更改背景，您可以在必要时进行更改。

— 阿里·席尔瓦（Ali Silva）
source
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.