CSS background-image-opacity？

  • Z时代
  • 2024-01-10
  • 分类：问答

与如何使用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>

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

回答：

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

或者，如果目标浏览器支持多个背景（Firefox3.6 +，Safari 1.0 +，Chrome 1.3 +，Opera 10.5 +，Internet Explorer

9+），则可以多次声明相同的部分透明背景图像。这些多张图像的不透明度应加起来，您定义的背景越多。

以上是 CSS background-image-opacity？ 的全部内容， 来源链接： utcz.com/qa/429610.html

回到顶部