In diesem Beispiel versuche ich, das übergeordnete Element transparenter zu machen, ohne die Deckkraft der untergeordneten Elemente zu ändern.
<div> <div className="larger-box"> <div className = "smaller-box"> </div> </div>
Das ist mein aktueller CSS-Stil:
.larger-box{
width: 10rem;
height: 10rem;
background-color: red;
}
.smaller-box{
width: 2rem;
height: 2rem;
background-color: green;
opacity: 1 !important;
}
Ist es möglich, diesen Effekt in CSS zu erzielen?
你可以使用CSS的
not。.larger-box:not(.smaller-box) { width: 10rem; height: 10rem; background-color: red; } .smaller-box { width: 2rem; height: 2rem; background-color: green; }孩子们总是会受到父母的不透明度的影响，所以给它们不同的不透明度的最简单方法是将它们设为兄弟元素，并将第二个元素绝对定位在第一个元素的上方，从而使每个元素都有自己的不透明度。请注意父包装div的position: relative。
在这里，我有一些文本显示在红色div的后面，绿色div位于其上方，就像它是一个子元素一样，但实际上它是一个兄弟元素，因此不受红色div的不透明度的影响。因此，文本透过红色div显示，但不透过绿色div显示。
.wrapper{ width: 10rem; height: 10rem; position: relative; } p { padding: 8px} .larger-box{ position: absolute; top: 0; left:0; width: 10rem; height: 10rem; background-color: red; opacity: 0.3 } .smaller-box{ width: 2rem; height: 2rem; background-color: green; opacity: 1; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }