在css中，父元素的透明度（`opacity`）会继承并影响其所有子元素，导致子元素无法独立保持完全不透明。为了解决这一问题，一种有效的策略是将原本的子元素转换为父元素的兄弟元素，并通过绝对定位将其覆盖在父元素之上，从而使两者能够独立设置各自的透明度。
理解CSS透明度继承机制
CSS的opacity属性用于设置元素的透明度。它的一个重要特性是，当一个元素设置了opacity值时，其所有子元素也会以该透明度为基础进行渲染。这意味着，如果父元素的opacity为0.5，而子元素的opacity为1，那么子元素的实际渲染透明度将是0.5 * 1 = 0.5。这种乘法继承机制导致我们无法直接通过在子元素上设置opacity: 1 !important;来使其完全不透明，因为父元素的透明度会始终对其产生影响。
解决方案：使用绝对定位实现独立透明度
要实现父元素透明而子元素（或视觉上的子元素）不透明的效果，我们不能让它们保持传统的父子DOM结构，因为opacity的继承是无法被阻止的。解决方案是改变它们的DOM关系，将它们变为兄弟元素，然后利用CSS的定位属性将它们在视觉上堆叠起来。
核心思路：
- 创建容器： 使用一个父级容器（wrapper）包裹所有元素，并设置position: relative;，以便其内部的绝对定位元素能够以此为参照。
- 分离元素： 将原先的父元素和子元素都放置在wrapper内部，作为其直接子元素（即兄弟关系）。
- 绝对定位： 对这两个兄弟元素都设置position: absolute;，然后通过top, left, right, bottom等属性将它们精确地定位到所需的位置。
- 独立透明度： 此时，由于它们不再是直接的父子关系，可以独立地设置各自的opacity值，互不影响。
示例代码：
假设我们有一个红色的大盒子（larger-box）需要半透明，而它内部有一个绿色的、需要完全不透明的小盒子（smaller-box）。
HTML 结构：
立即学习“前端免费学习笔记（深入）”；
<div class="wrapper"> <!-- 演示内容，将透过红色盒子显示 --> <p>Lorem ipsum dolor sit amet. Sit dicta tempore id quas delectus estitier at voluptatem voluptas sit culpa iste ea voluptatum vero!</p> <!-- 视觉上的“父元素” --> <div class="larger-box"></div> <!-- 视觉上的“子元素” --> <div class="smaller-box"></div> </div>
CSS 样式：
.wrapper {
width: 10rem;
height: 10rem;
position: relative; /* 为绝对定位的子元素提供定位上下文 */
border: 1px solid #ccc; /* 仅为演示边界 */
}
p {
padding: 8px;
position: absolute; /* 确保文本也在堆叠上下文中 */
top: 0;
left: 0;
width: 100%;
box-sizing: border-box;
z-index: 1; /* 确保文本在红色盒子之下 */
}
.larger-box {
position: absolute; /* 脱离文档流，可以自由定位 */
top: 0;
left: 0;
width: 10rem;
height: 10rem;
background-color: red;
opacity: 0.3; /* 父元素半透明 */
z-index: 2; /* 位于文本之上，绿色盒子之下 */
}
.smaller-box {
width: 2rem;
height: 2rem;
background-color: green;
opacity: 1; /* 子元素完全不透明 */
position: absolute; /* 脱离文档流，可以自由定位 */
top: 50%; /* 垂直居中 */
left: 50%; /* 水平居中 */
transform: translate(-50%, -50%); /* 精确居中 */
z-index: 3; /* 位于红色盒子之上 */
}代码解析：
- .wrapper: 被设置为position: relative;，这使得其内部的绝对定位元素（.larger-box和.smaller-box）会相对于它进行定位。
- p: 这是一个额外的文本内容，用于演示红色盒子是半透明的，文本会透过它显示。它也被绝对定位并设置了z-index，以控制其堆叠顺序。
- .larger-box: 被设置为position: absolute;，并放置在wrapper的左上角。它的opacity设置为0.3，使其半透明。
- .smaller-box: 同样被设置为position: absolute;。它通过top: 50%; left: 50%;和transform: translate(-50%, -50%);实现了在.wrapper中的精确居中。最关键的是，它的opacity被设置为1，由于它与.larger-box是兄弟关系，其透明度不会受到.larger-box的影响，因此能保持完全不透明。
- z-index: 用于控制元素的堆叠顺序。p在底层（z-index: 1），.larger-box在其上（z-index: 2），而.smaller-box在最上层（z-index: 3），确保了视觉上的正确覆盖。
注意事项与总结
- 布局复杂性： 这种方法虽然解决了透明度继承问题，但会增加布局的复杂性，需要仔细处理元素的定位和z-index。
- 语义化： 在某些情况下，这种将视觉上的“子元素”转换为兄弟元素的方法可能会稍微偏离HTML的语义结构，但在追求特定视觉效果时，这是一种常见的CSS技巧。
- 替代方案（仅背景）： 如果只需要父元素的背景色半透明，而其内容和子元素完全不透明，那么可以使用background-color: rgba(255, 0, 0, 0.3);（使用rgba颜色值）而不是opacity属性。然而，如果需要整个父元素（包括其边框、文本等所有内容）都半透明，同时子元素不透明，则上述绝对定位方案更为适用。
- 性能考量： 频繁使用绝对定位和transform可能会对性能产生轻微影响，但在大多数现代浏览器中，这种影响通常可以忽略不计。
通过将视觉上的父子元素解耦为兄弟元素并利用绝对定位进行堆叠，我们可以有效地绕过CSS opacity的继承特性，实现父元素半透明而子元素完全不透明的独立控制效果。这种方法在实现复杂UI设计时非常实用。
