Question

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

它有效，但它体积庞大而且丑陋，并且在更复杂的布局中弄乱了。

Answer 1

您可以使用CSS Generated Content

执行褪色背景

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秒内动画为1。

兼容性

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

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

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/

Answer 3

如果背景不必重复，你可以使用精灵技术（滑动门）将所有具有不同不透明度的图像放在一起（彼此相邻），然后用{{ 1}}。

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

Answer 4

尝试这个技巧..使用带有（插入）选项的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;

并增加数字以填充您的信箱：）

享受！

Answer 5

您可以在要使其具有透明背景的元素中放置第二个元素。

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

Answer 6

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

说明：

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

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

background-image 的 opacity 示例

0.3

享受吧！

Credits

Answer 7

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

Answer 8

#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

Answer 9

这是使用CSS设置渐变和透明度的另一种方法。你需要稍微玩一下参数arround。

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

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

Answer 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 浏览器中检查了这一点。

Answer 12

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

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

CSS background-image-opacity？

12 个答案: