CSS中的 opacity
属性可以设置透明度值,取值范围为0到1之间,包括0和1。其中,0表示完全透明,1表示完全不透明。在实际应用中,我们也可以使用小数来表示不同程度的透明度,如0.5表示半透明状态。
需要注意的是,opacity
属性设置的透明度会影响元素及其内容的透明度。如果只想设置元素的背景透明,可以使用 background-color
属性的 rgba()
值,如 background-color: rgba(255, 255, 255, 0.5)
表示白色半透明背景。
另外,opacity
属性还会影响元素的子元素透明度,如果只想设置子元素的透明度而不影响父元素,可以考虑使用 rgba()
值或者 opacity
属性的值为1的父元素包裹子元素,再设置子元素的透明度,如下所示:
<div style="background-color: rgba(255, 255, 255, 0.5);">
<p style="opacity: 1;">不透明文本</p>
<p style="opacity: 0.5;">半透明文本</p>
</div>
其中,第一个 <p>
元素不受父元素的透明度影响,保持完全不透明;而第二个 <p>
元素受到父元素的透明度影响,呈现半透明状态。