在 CSS 中，我们可以使用 CSS 的“background”属性设置特定 HTML 元素的背景。有时，我们可能需要降低背景颜色的不透明度而不影响 HTML 元素的内容。
我们可以通过减小 alpha 变量的值来降低背景颜色的不透明度，同时将颜色值分配给“背景颜色”属性。
语法
用户可以按照以下语法仅将不透明度设置为背景色，而不是 CSS 中的文本。
background: rgba(255, 0, 0, opacity); orbackground-color: hsla(0, 100%, 30%, opacity);
用户可以使用‘rgba’或‘hsla’设置背景颜色；这里“a”代表 alpha 不透明度，其值介于 0 和 1 之间。
立即学习“前端免费学习笔记（深入）”；
示例 1
在下面的示例中，我们创建了 HTML div 元素并使用“background”属性设置背景颜色。我们使用“rgba”值来设置背景颜色。我们将“红色”颜色设置为背景，不透明度为“0.1”，用户可以在输出中观察到。
.div { background: rgba(255, 0, 0, 0.1); height: 100px; width: 500px; } Setting up the background opacity without affecting the content of the div element
Hello! How are you?
示例 2
在下面的示例中，我们使用“background-color”CSS 属性来设置 HTML div 元素的背景。此外，我们还使用“hsla”值作为背景，并使用“0.2”alpha 不透明度值。
用户可以在0到1之间增加或减少不透明度值并观察背景颜色的变化。
.div { background-color: hsla(0, 100%, 30%, 0.2); height: 100px; width: 500px; } Setting up the background opacity using the background-color: hsla CSS property without affecting the content of the div element
This is a content of the div element.
示例 3
我们可以将背景div与内容div分开，并为div元素设置不透明度较低的背景颜色。
在这里，我们有一个父 div。在父 div 中，我们有背景和内容 div。背景和内容 div 尺寸与父 div 相同。我们可以设置两个 div 元素的 z-index 属性，以将内容 div 显示在背景 div 上方。
之后，我们可以使用 CSS 的“opacity”属性仅降低背景 div 的不透明度。这样，我们就可以将背景 div 放在内容 div 的下方，并玩弄背景 div 的不透明度。
#parent { width: 500px; height: 150px; position: relative; } #content { position: absolute; width: 100%; height: 100%; color: white; font-size: 1.2rem; top: 0; left: 0; } #background { background: blue; filter: alpha(opacity=30); position: absolute; height: 100%; width: 100%; top: 0; left: 0; } Setting up the background opacity using the filter: alpha(opacity = value) CSS property without affecting the content of the div element
This is the content of the div element.
用户学会了在不影响文本或 div 内容的不透明度的情况下设置背景颜色的不透明度。用户可以在使用“rgba”或“hsla”值时降低颜色的不透明度。如果用户有图像或其他任何内容作为背景，他们可以为背景和内容创建单独的 div，并降低背景 div 的不透明度。
以上就是仅将不透明度设置为背景颜色，而不是 CSS 中文本的不透明度的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1626000.html
微信扫一扫 
支付宝扫一扫 
