CSS background-image-opacity？

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>

它有效,但它体积庞大,丑陋,并且在更复杂的布局中混乱.

Answer 1

您可以使用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;
}

UPDATE

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

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

如果背景不必重复,您可以使用精灵技术(滑动门),将所有具有不同不透明度的图像放入一个(彼此相邻),然后将它们移动background-position.

或者,如果您的目标浏览器支持多种背景(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

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

解释：

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

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

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

享受 ！

制作人员

Answer 6

尝试这个

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