对于那些不能等待的人,Fiddle
我在CSS中遇到了这个问题。 HTML和CSS代码的结构如下所示
HTML:
<div class="one">
<div class="two">
<div class="three">
</div>
</div>
</div>
CSS:
.one{
width: 500px;
height: 500px;
background: url('http://www.moonlightcompanies.com/wp-content/uploads/2013/01/6973_MOONF-PomegranatesOnTree-8536-1.jpg');
background-size: cover;
background-repeat: no-repeat;
padding: 20px;
}
.two{
width: 300px;
height: 300px;
background: blue;
padding: 20px;
}
.three{
width: 200px;
height: 200px;
background: transparent;
padding: 20px;
border: 5px solid yellow;
}
我的问题是如何使<div class="three"></div>
的背景透明,并与<div class="one"></div>
的背景混合。我希望我的期望输出结果像附加的图片一样。这可能吗?
second
div将成为透明的,而third
div将成为蓝色背景的。 - Ofir Baruch