How do I give text or an image a transparent background using CSS?相关,但略有不同.

我想知道是否有可能改变背景image的alpha值,而不仅仅是 colored颜色 .显然,我可以用不同的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移动它们.

或者,如果您的目标浏览器支持multiple backgrounds(Firefox 3.6+、Safari 1.0+、Chrome 1.3+、Opera 10.5+、Internet Explorer 9+),您也可以多次声明相同的半透明背景图像.你定义的背景越多,这些多个图像的不透明度就应该加起来.

此合并透明胶片的过程称为Alpha Blending,计算公式为(感谢@IainFraser):

αᵣ = α₁ + α₂(1-α₁),其中α的范围在0到1之间.

Css相关问答推荐

在carousel组件上应用css转换时出现问题

如何在css中从圆中切出1/n?

单独.css文件中的样式不适用于Angular 元件

如何将下拉面板放置在MAT-SELECT文本框的正下方

在 CSS 中跨列对齐文本基线

滚动弹性盒

如何在不使用 sx props 的情况下从 Select 样式中定位 mui paper 组件?

如何在 VS Code 中获得 JavaFX CSS 属性的自动完成功能?

使用 React JS 和自定义 CSS 创建 Cookie 横幅

最多 2 行的 Flex 水平滚动

如何给三角形添加渐变?

css渐变实现2色虚线边框

停止 div 推动另一个 div 做出react

如何测试页面上的文本被删除

当计算的宽度不准确时,如何在 cypress 中测试元素的宽度?

AngularJS Graphs & Charts - 实线和虚线的混合

用 svelte 设计 body 元素

如何使用 Bootstrap 3 阻止按钮保持压抑状态

CSS Select /样式第一个词

根据背景 colored颜色 反转 CSS 字体 colored颜色