如何删除继承的背景？

Question

我有这个例子：

https://jsfiddle.net/6ux3fzzc/

代码HTML：

  <div class="container">

<div class="row">
    <div class="row2">
       TEST 
    </div>    
</div>

</div>

CODE CSS：

    .container{

   background:blue;
    width:100px;
    height:100px;
}

.row2{
    background:transparent;
    color:white;

}

.row 2背景为蓝色，因为它继承自.container

如何让它透明以查看背景色体？

提前致谢！

编辑：

https://jsfiddle.net/6ux3fzzc/7/

我编辑了我的帖子并且我添加了一个新实例...现在你知道我想要什么吗？ 我想.row2是透明的，看看我的背景。

Answer 1

row2的{​​{1}}为background-colour，因此蓝色将通过它显示。如果您需要transparent上的背景颜色，请按以下方式设置：

row2

Answer 2

  

如何让它透明以查看背景色体？

它已经透明，但你的背景容器是蓝色的。这就是为什么它是蓝色的原因。

Answer 3

您无法使第2行的背景颜色成为正文的背景颜色。 row2嵌套在容器内，使row2透明，使得它采用容器的背景颜色。

因此，实现此目的的唯一方法是将row2的背景颜色明确指定为白色

.row2{
   background-color: white;
}

Answer 4

background的{​​{1}}为.row2，因此您会将其视为Transparent Blue background的原因container

如果您将.row2 background设置为green，则会看到它未被继承。

https://jsfiddle.net/6ux3fzzc/4/