如何使元素透明，使其背景落后2层？

Question

我有一个动画背景（背景），背景颜色（A）的div和其中的另一个div（B）。我希望B是透明的，所以通过它我们看到动画背景，但是B在A中，它已经具有背景色。

任何想法来实现这一目标？

Answer 1

你可以这样使用CSS夹路径属性，只要你只是想“B”是的“A”切口实现的，这种情况下你根本不需要'B'。

HTML：

<div class="animated-bg"> 
    <div class="inner-a"> 
    </div> 
</div> 

CSS：

.animated-bg { 
    background-image: url(http://www.animateit.net/data/media/august2009/twi.gif); 
    width: 100%; 
    height: 700px; 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    justify-content: center; 
} 

.inner-a { 
    background-color: white; 
    width: 600px; 
    height: 400px; 
    margin: 0 auto; 
    -webkit-clip-path: polygon(0% 0%, 0% 100%, 25% 100%, 25% 25%, 75% 25%, 75% 75%, 25% 75%, 25% 100%, 100% 100%, 100% 0%); 
} 

否则，如果你想 'B' 来保存你可以绝对位置后面夹住东西如文本 'A'，并给它一个透明背景。

事情是这样的：

HTML

<div class="animated-bg"> 
    <div class="inner-b"> 
    hello 
    </div> 
    <div class="inner-a"> 
    </div> 
</div> 

CSS：

.animated-bg { 
    background-image: url(http://www.animateit.net/data/media/august2009/twi.gif); 
    width: 100%; 
    height: 700px; 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    justify-content: center; 
} 

.inner-a { 
    position: absolute; 
    background-color: white; 
    width: 600px; 
    height: 400px; 
    margin: 0 auto; 
    -webkit-clip-path: polygon(0% 0%, 0% 100%, 25% 100%, 25% 25%, 75% 25%, 75% 75%, 25% 75%, 25% 100%, 100% 100%, 100% 0%); 
    z-index: 2; 
} 

.inner-b { 
    width: 400px; 
    height: 300px; 
    margin: 0 auto; 
    position: absolute; 
    background: transparent; 
    z-index: 1; 
    color: white; 
    text-align: center; 
    line-height: 300px; 
} 

大眼夹好才是真的好，以获得正确尺寸的片段：http://bennettfeely.com/clippy/

• 小提琴1例：https://jsfiddle.net/fjr7qvcm/1/
• 小提琴示例2：https://jsfiddle.net/fjr7qvcm/4/

Answer 2

所以它听起来像你有三层：背景，Div A和​​Div B. Div A + B需要透明才能看到动画背景。你有没有尝试过使用CSS属性“不透明度”？

div { 
    opacity: .3; /* Anything betweet 0 - 1 */ 
    filter: alpha(opacity=30); /* For IE8 and earlier */ 
} 

看看这个关于透明度的更多信息https://www.w3schools.com/css/css_image_transparency.asp

Answer 3

不能使用一个div像一个面具来隐藏其母公司的背景。所以，或者你可以改变的div.A的background-color是border，这样就可以有一个像下面的例子

.out { 
 
    background: repeating-linear-gradient(45deg, #606dbc, #606dbc 10px, #465298 10px, #465298 20px); 
 
    height: 200px; 
 
    padding: 30px; 
 
} 
 

 
.A { 
 
    border-style: solid; 
 
    border-color: red; 
 
    border-width: 20px 40px 20px 40px; 
 
    height: 100px; 
 
} 
 

 
.B { 
 
    background: transparent; 
 
}

<div class="out"> 
 
    <div class="A"> 
 
    <div class="B"> 
 
    </div> 
 
    </div> 
 
</div>