84669 人学习
152542 人学习
20005 人学习
5487 人学习
7821 人学习
359900 人学习
3350 人学习
180660 人学习
48569 人学习
18603 人学习
40936 人学习
1549 人学习
1183 人学习
32909 人学习
在这个例子中，我试图使父元素更透明，而不改变子元素的不透明度。
这是我当前的CSS样式： .larger-box{ width: 10rem; height: 10rem; background-color: red; } .smaller-box{ width: 2rem; height: 2rem; background-color: green; opacity: 1 !important; } 有没有可能在CSS中实现这个效果？ 2 0 0 P粉827121558 全部回复 (2) 我来回复 关闭 P粉0879514422023-09-10 13:25:43 2 楼 你可以使用CSS的not。 .larger-box:not(.smaller-box) { width: 10rem; height: 10rem; background-color: red; } .smaller-box { width: 2rem; height: 2rem; background-color: green; } 点赞+0 添加回复 关闭回复 P粉827121558 回复 P粉3156805652023-09-10 13:20:59 1 楼 孩子们总是会受到父母的不透明度的影响，所以给它们不同的不透明度的最简单方法是将它们设为兄弟元素，并将第二个元素绝对定位在第一个元素的上方，从而使每个元素都有自己的不透明度。请注意父包装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%); } Lorem ipsum dolor sit amet. Sit dicta tempore id quas delectus estitier at voluptatem voluptas sit culpa iste ea voluptatum vero! 点赞+0 添加回复 关闭回复 P粉827121558 回复
这是我当前的CSS样式：
.larger-box{ width: 10rem; height: 10rem; background-color: red; } .smaller-box{ width: 2rem; height: 2rem; background-color: green; opacity: 1 !important; }
有没有可能在CSS中实现这个效果？
你可以使用CSS的not。
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%); }
Lorem ipsum dolor sit amet. Sit dicta tempore id quas delectus estitier at voluptatem voluptas sit culpa iste ea voluptatum vero!
你可以使用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%); }