如何使背景透明的每個區域，但不是HTML中的內容

Question

我有這個代碼將頁面拆分爲6.我如何使每個片段透明，但不是實際的內容這是我以前，但我是不知道該怎麼辦我已經嘗試創建一個內容的div，並將透明度更改爲1，但這不起作用，所以我該怎麼做。

的圖像是隨機

這裏是

html, body { 
 
height: 100%; 
 
padding: 0; 
 
margin: 0; 
 
} 
 
#div1, #div2, #div3, #div4, #div5, #div6 { 
 
\t width: 50%; 
 
\t height: 50%; 
 
\t float: left; 
 
} 
 
#div1 { 
 
    height: 50%; 
 
    width: 50%; 
 
    opacity: 0.5; 
 
    color: black; 
 
    background-image: url("http://htmlcolorcodes.com/assets/images/html-color-codes-color-tutorials-hero-00e10b1f.jpg"); 
 
} 
 

 
#div2 { 
 
    height: 50%; 
 
    width: 50%; 
 
    opacity: 0.5; 
 
    color: black; 
 
\t background-image: url("http://www.intrawallpaper.com/static/images/abstract-mosaic-background.png"); 
 
} 
 

 
#div3 { 
 
\t background-image: url("http://www.planwallpaper.com/static/images/recycled_texture_background_by_sandeep_m-d6aeau9_PZ9chud.jpg"); 
 
} 
 

 
#div4 { 
 
\t background: #444; 
 
} 
 

 
#div5 { 
 
\t background: #555; 
 
} 
 

 
#div6 { 
 
\t background: #666; 
 
}

<div id="div1"> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure mollitia molestias recusandae nulla placeat repellat odio eos. Blanditiis nulla suscipit sequi ducimus distinctio quo tempore.</p> 
 
</div> 
 
<div id="div2"> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure mollitia molestias recusandae nulla placeat repellat odio eos. Blanditiis nulla suscipit sequi ducimus distinctio quo tempore.</p> 
 
</div> 
 
<div id="div3"> 
 
</div> 
 
<div id="div4"> 
 
</div> 
 
<div id="div5"> 
 
</div> 
 
<div id="div6"> 
 
</div>

Answer 1

所以，你想改變透明度CSS，但文本的不透明度？

您可以增加不透明度（範圍從0.0 - 1.0，數字越小，圖像越透明）。 。

您還可以使用RGBA顏色值，當你不希望應用不透明的子元素（在這種情況下，您的段落內容

從w3schools.com：http://www.w3schools.com/css/css_image_transparency.asp

的RGBA顏色值與指定：RGBA（紅，綠，藍，alpha）阿爾法參數之間是0.0（完全透明）和1.0（完全不透明）

實施例的代碼的數：

div { 
background: rgba(76, 175, 80, 0.3) /* Green background with 30% opacity */ 

}

希望這會有所幫助！