logo标签列表

一个子div可以比父元素有更高的透明度吗？（使用CSS）

cssopacity
28

我在页面主体上有一个背景图片，我想让它透过第一层div显示出来，但不透过第二层

<body>
      <div style='opacity:0.9;'><p>This is a wrapper that shows some of the background</p>
          <div style='background-color:#fff;'><p>This is a child div that I want to be all white</p>
          </div>
      </div>
</body>

显然第二层div也会继承0.9的不透明度，有没有方法可以覆盖这个属性？

这应该有所帮助。http://css-tricks.com/non-transparent-elements-inside-transparent-elements/ - anuj_io
3
简单的回答是否定的：你需要找到绕过它的方法。 - BoltClock
可能是重复的问题：我不想在CSS中从父元素继承子元素的不透明度。 - T J
2个回答
38

你可以像这样操作：

定义父元素的透明度

然后将子元素设置为相同的透明度

例如：

css

.parent{
    padding:20px;
    background:rgba(112,81,246,0.3);
}
.child{
    padding:20px;
    background:rgba(112,81,246,0.6);
}
​

HTML

<div class="parent">
<div class="child">Hello i m child</div>
</div>​

这里有一个实时演示 http://jsfiddle.net/rohitazad/PC4sL/

-2
没有任何链接可用了。这是一个很好的例子，说明在外部资源无法访问或永久下线的情况下，始终引用“重要链接的最相关部分”的重要性。https://stackoverflow.com/help/how-to-answer - alpipego
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接