html子级透明度不随父级别,我不想从CSS的父级继承子级不透明度

我不想从CSS的父级继承子级的不透明度。

我有一个div是父级，而我在第一个div中有另一个div是孩子。

我想在父div中设置opacity属性，但我不希望子div继承opacity属性。

我怎样才能做到这一点？

#1楼

就像其他人在此线程和其他类似线程中提到的那样，避免此问题的最佳方法是使用RGBA / HSLA或使用透明的PNG。

但是，如果您想要一个荒谬的解决方案，类似于该线程(也是我的网站)的另一个答案中链接的解决方案，那么我编写了一个全新的脚本，该脚本可以自动解决此问题，称为thatsNotYoChild.js：

基本上，它使用JavaScript从父div中删除所有子项，然后将子元素重新定位到应有的位置，而不再是该元素的子项了。

对我来说，这应该是万不得已的方法，但是我认为如果有人愿意这样做的话，写点东西会很有趣。

#2楼

如果必须将图像用作透明背景，则可以使用伪元素来解决它：

html

I have 100% opacity

的CSS

.wrap, .wrap > * {

position: relative;

}

.wrap:before {

content: " ";

opacity: 0.2;

background: url("http://placehold.it/100x100/FF0000") repeat;

position: absolute;

width: 100%;

height: 100%;

}

#3楼

对于试图制作一张桌子(或其他东西)的其他人来说，使用不透明性看上去只专注于一行。 就像@Blowski所说的，使用颜色而不是不透明度。 看看这个小提琴： http : //jsfiddle.net/2en6o43d/

.table:hover > .row:not(:hover)

#4楼

我的答案不是关于静态父子布局，而是关于动画。

我今天正在做一个svg演示，我需要将svg放到div内(因为svg是用父级的div宽度和高度创建的，以使周围的路径动画化)，并且在svg路径动画期间，该父div必须不可见(然后该div应该将animate opacity from 0 to 1 ，这是最重要的部分)。 而且由于opacity: 0父级div隐藏了我的svg，因此我遇到了具有visibility选项的hack(具有visibility: visible child的孩子可以在具有visibility: hidden父对象内部看到)：

.main.invisible .test {

visibility: hidden;

}

.main.opacity-zero .test {

opacity: 0;

transition: opacity 0s !important;

}

.test { // parent div

transition: opacity 1s;

}

.test-svg { // child svg

visibility: visible;

}

然后，在js中，您可以使用超时功能删除.invisible类，添加.opacity-zero类，并使用.opacity-zero类的方法触发布局whatever.style.top; 并删除.opacity-zero类。

var $main = $(".main");

setTimeout(function() {

$main.addClass('opacity-zero').removeClass("invisible");

$(".test-svg").hide();

$main.css("top");

$main.removeClass("opacity-zero");

}, 3000);

#5楼

子元素的不透明度是从父元素继承的。

但是我们可以使用css position属性来完成我们的成就。

文本容器div可以放在父div的外部，但绝对位置可以投射所需的效果。

理想要求------------------ >>>>>>>>>>>>>>

的HTML

The text opacity is inherited from the parent div

的CSS

.container{

position:relative;

}

.bar{

opacity:0.2;

background-color:#000;

z-index:3;

position:absolute;

top:0;

left:0;

}

.text{

color:#fff;

}

输出：-

文本不可见，因为从父div继承了不透明度。

解决方案------------------- >>>>>>

的HTML

Opacity is not inherited from parent div "bar"

的CSS

.container{

position:relative;

}

.bar{

opacity:0.2;

background-color:#000;

z-index:3;

position:absolute;

top:0;

left:0;

}

.text{

color:#fff;

z-index:3;

position:absolute;

top:0;

left:0;

}

输出：

文本与背景颜色相同，因为div不在透明div中