小编典典

CSS background-image-opacity?

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>

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


阅读 973

收藏
2020-05-10

共1个答案

小编典典

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

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

2020-05-10