如何使元素透明，使其背景落後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>