CSS背景-图像-不透明度？
CSS背景-图像-不透明度？
提问于 2011-07-31 23:07:03
与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>它可以工作，但是它很笨重和丑陋，并且在更复杂的布局中把事情搞得一团糟。
回答 10
Stack Overflow用户
回答已采纳
发布于 2011-07-31 23:53:33
如果背景不需要重复，你可以使用精灵技术(滑动门)，将所有不透明度不同的图像放在一起(彼此相邻)，然后用background-position移动它们。
或者，如果你的目标浏览器支持multiple backgrounds (火狐3.6+，Safari 1.0+，Chrome 1.3+，Opera 10.5+，if 9+)，你可以多次声明相同的部分透明的背景图片。你定义的背景越多，这些多个图像的不透明度就应该加起来。
这个组合透明度的过程被称为Alpha Blending，并计算为(感谢@IainFraser)：
αᵣ = α₁ + α₂(1-α₁)，其中α的范围在0到1之间。
Stack Overflow用户
发布于 2013-07-30 21:58:53
.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);
}Stack Overflow用户
发布于 2013-03-12 08:32:13
试试这个把戏..使用带有(inset)选项的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;并增加数字以填满您的方框:)
享受吧！
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/6890218
复制相关文章
相似问题