覆盖子元素继承的不透明度
在 CSS 中,元素从其父元素继承不透明度。要仅调整父级的不透明度,同时保留子级的原始外观,请考虑以下方法:
1.不透明度计算:
不透明度值是相乘的。这意味着不透明度为 0.6 的父元素中不透明度为 0.5 的元素的有效不透明度为 0.3 (0.5 * 0.6)。
示例:
<code class="css">#parent { opacity: 0.6; } #child { opacity: 1; }</code>
在此示例中,#child 元素将显示为不透明,即使其父元素具有半透明不透明度。
2.重新定位子元素:
如果可能,将 #child 元素移到 #parent 元素之外。这将防止子级继承父级的不透明度。
3.对子元素使用 RGBA 颜色:
不要直接在父元素上设置不透明度,而是对子元素的背景、边框或字体使用 RGBA 颜色。 RGBA 颜色将不透明度指定为第四个值:
<code class="css">#child { background-color: rgba(255, 165, 0, 0.5); }</code>
附加说明:
以上是以下是基于所提供文章的一些基于问题的标题: 正式的的详细内容。更多信息请关注PHP中文网其他相关文章!