CSS背景透明度與文字完全可見

我試圖達到的效果，我有一個div的透明背景顏色（以便我可以看到圖像在後面），並保持網站的主要內容爲中心（即使在調整窗口大小時）。CSS背景透明度與文字完全可見

我在JS小提琴中寫了一個快速模擬來演示我正在嘗試做什麼。我遇到的問題是，當我將不透明度設置爲根div時，div的每個孩子都會得到該不透明度，我無法將其寫入。我明白，我在小提琴中這樣做的方式由於沒有固定任何東西而不起作用，但是如何在調整大小時如何實現這種效果並保持網站居中？

我可以做到這一點，而不使用JS？

最後一個音符，在JS小提琴，文本應該是不透明1，而黃應保持透明度0.3

這裏是JS小提琴：http://jsfiddle.net/7d6NY/

HTML：

<img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcQuK9zPKC8rFhpf1S9-2bGCaIUdm9-YMeQiBRdc5rRY_xiQTYvd" alt="image missing" class="bg-image" /> 
<div class="transparency"> 
    <div class="content"> 
     THIS IS MY PAGE CONTENT 
    </div> 
</div>

CSS ：

.transparency{ 
    background-color: yellow; 
    display: block; 
    opacity: 0.3; 
    margin: 0 auto; 
    width: 300px; 
    height: 500px; 
} 
.content{ 
    color: #000; 
    opacity: 1; 
    text-align: center; 
} 
img{ 
    /* Set rules to fill background */ 
    min-height: 100%; 
    min-width: 1920px; 
    /* Set up proportionate scaling */ 
    width: 100%; 
    height: auto; 
    /* Set up positioning */ 
    position: fixed; 
    top: 0; 
    left: 0; 
}

來源

2014-07-20 Bojan

您可以使用rgba（more info on MDN）值透明背景色+不要忘了給一個負z-index值的圖像，因此棧後面的內容：

DEMO

CSS：

.transparency{ 
    background-color: rgba(255, 255, 0, 0.3); /* <-- this line is modified */ 
    display: block; 
    margin: 0 auto; 
    width: 300px; 
    height: 500px; 
} 
.content{ 
    color: #000; 
    text-align: center; 
} 
img{ 
    /* Set rules to fill background */ 
    min-height: 100%; 
    min-width: 1920px; 
    /* Set up proportionate scaling */ 
    width: 100%; 
    height: auto; 
    /* Set up positioning */ 
    position: fixed; 
    top: 0; 
    left: 0; 
    z-index:-1; /* <-- this line is added */ 
}

來源

2014-07-20 18:09:07

背景顏色的條件是什麼：rgba（252，252，0，0.3）;工作？ – Bojan

@Bagzli沒有具體條件，你可能想知道IE8不支持RGB顏色不透明http://caniuse.com/css3-colors –

.transparency { 
background-color: rgba(255, 255, 0, 0.4);  
display: block; 
margin: 0 auto; 
width: 300px; 
z-index: 10000; 
position: relative; 
height: 500px; 
} 

.content { 
color: #000; 
text-align: center; 
}

在此工作演示; http://jsfiddle.net/7LNS4/

來源

2014-07-20 18:06:49 Jay

這確實ñ ot work – Bojan

我已經更新了我的代碼，請試試這個，它在js小提琴中有效。 – Jay

具有「RGBa」值的背景色對您有幫助嗎？

.content{ 
    background-color:rgba(255,255,0,0.3); 
    color: #000; 
    opacity: 1; 
    text-align: center; 
}

來源

2014-07-20 18:07:36 Poupy

CSS背景透明度與文字完全可見

回答

相關問題