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

---

它可以工作，但它体积庞大、丑陋，并且在更复杂的布局中把事情搞得一团糟。

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

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

背景位置

移动它们

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

此组合透明胶片的过程称为并计算为（感谢@IainFraser）：

---

αᵣ = α₁ + α₂(1-α₁)

其中

α

的范围在0到1之间。

您可以使用CSS生成的内容制作褪色的背景

演示

Html

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

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

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

比如说

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

更新

您可以使用css转换来设置不透明度的动画（同样通过类）

演示

添加

-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，可能也支持更早的版本，但只是检查了我当前的版本），但他们知道并正在使用它（）

---

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

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

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

---

试试这个把戏。。使用css shadow with（inset）选项，并以deep 200px为例

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

代码：

也适用于所有浏览器：

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

并增加数字以填充您的方框：）

享受吧

抄袭自：

Hack with opacity 0.99（小于1）创建z索引上下文，因此您不必担心全局z索引值。（尝试将其删除，并查看下一个演示中父包装具有正z索引时会发生什么情况。）
如果您的元素已经有了z索引，那么您就不需要这种攻击

---

.

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

所以说它的身体：：在你寻找之后。这样，你身体的代码就不会改变，也不会改变，只会改变背景，你可以在必要的时候做出改变

试试这个

---

我使用它，我在白色背景上测试过它，但它可以与背景颜色匹配，特别是在使用：

---

需要注意的是，我只在Chrome浏览器中选中了此选项。

要设置背景图像的

不透明度

，您只需在

背景图像

集中添加一个不透明图像作为第一个图像

说明：

• 渐变功能是从颜色创建图像
• rgba函数正在创建一种颜色，该颜色接受不透明度作为参数（即alpha参数）

• alpha=1-白色的不透明度

• 因此，通过组合它们，可以创建不透明图像

例如，您可以通过在

背景图像

0.3

正文{
背景图像：线性渐变（向右，rgba（255255255，0.7）0 100%），url(https://images.unsplash.com/photo-1497294815431-9365093b7331?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=格式和配合=裁剪&w=1950&q=80）；
背景尺寸：封面；
}

背景图像后面是什么？纯色还是其他图像？@Eric:我不是指任何具体的情况，我只是想找到问题的一般解决方案。@Kolink:我在想一个需要背景图像褪色的场景。嗯，我开发了在线浏览器游戏，我想在动画中做一些事情，需要这个可变不透明度的背景图像。在FF5中看起来很不错，干得不错。我完全忘记了伪元素有

url

属性，我尝试使用

background

，但无法解决z-index问题（下面的内容）。答案很好，但考虑到Firefox在其他方面的表现有多差（到处都是内存泄漏，JS中存在可怕的延迟，它几乎和IE6一样慢，当然比IE7慢…）我会寻找一个更跨浏览器的解决方案。@WesleyMurch，我可以请你看看关于不同主题的css、jquery问题吗？这和“黑客”不完全一样吗我在问题中使用了？嗯……我想，但我不明白什么对你不起作用。我使用了这种方法，效果很好。这正是你的技巧，但因为你不愿意提供一个例子，并且通过你的评论“@Eric:我不是指任何具体的案例，我正在试图找到问题的一般解决方案”你似乎很清楚你想要的不是一个黑客或变通方法

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

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

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

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

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

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