CSS透明度，如何在透明容器元素

不透明的元素，我使用下面的CSS代碼：CSS透明度，如何在透明容器元素

.rounded_box{ 
-webkit-border-radius: 5px; 
-moz-border-radius: 5px; 
border-radius: 5px; 
width:850px; 
padding:15px; 
background-color:#80C1FF; 
margin:0 auto; 
color: #0D2E47; 
font-family: Arial,Helvetica,sans-serif; 
opacity:0.6; 
filter:alpha(opacity=60); /* For IE8 and earlier */ 
/* background-color:rgba(255,0,0,255); */ 
} 
.rounded_box h1{ 
    opacity:1.0; 
filter:alpha(opacity=100); /* For IE8 and earlier */ 
}

而且我希望有h1和其他元件的不透明是有DIV類rounded_box內。但是，也讓h1和其他元素透明，我不想要。

那麼什麼可以爲這個問題的解決？

來源

2011-11-18 Hafiz

設置RGBA值的背景顏色...僅限於 –

RGBA不適用於IE8及更早版本 – Hafiz

相關http://stackoverflow.com/questions/806000/transparent-background-but-not-the-content -text-images-inside-it-in-css-on –

如果只是在尋找圓形框元件上的透明背景，使用下面的代碼：

.rounded_box{ 
... 
background-color:rgba(128,193,255,0.6); 
... 
/*filter:alpha(opacity=60); Remove this */ 
} 

.rounded_box h1{ 
... 
}

來源

2011-11-18 15:11:22

這個問題也是在Firefox中，它會工作嗎？ – Hafiz

只有RGBA將無法在IE8和更早 – Hafiz

是有辦法只添加CSS的IE瀏覽器？我只想補充一些後備 – Hafiz

在.rounded_box的opacity: 0.6將被應用到所有的子元素（因此.rounded_box h1。所以h1opacity:1.0是真正的父（0.6）的只有100％。

你可以做的是使用rgba定義。的.rounded_box，這並不影響孩子們的背景顏色

來源

2011-11-18 15:02:39 motoxer4533

很好的例子：http://css-tricks.com/2151-rgba-browser-support/ –

只有RGBA將無法在IE8和更早 – Hafiz

嘗試使用CSS3PIE：http://css3pie.com/documentation/supported- css3-features /＃rgba http://css3pie.com – motoxer4533

基本上沒有這個靈丹妙藥。不幸的是，不透明度被遺傳給具有不透明度的元素的所有子元素，並且無法將不透明度設置爲「120％」以克服父元素上80％的不透明度。

我的舒適區。將有一個不帶不透明度，其保持2周的div含DIV：一個以保持血糖圖像，圓形邊緣，不透明度，等等;和其持有內容的兄弟姐妹。我會使用JavaScript來強制不透明div的高度作爲內容div的高度，然後我絕對將內容div放在不透明的位置上。

我只是使用Alpha透明的PNG作爲圓框的背景圖像，假設我沒有有條件地改變它們的顏色或任何東西。如果您願意單獨切出頂部/底部/側面/角落，則可以這樣做，並且仍然可以容納可變的寬度和高度。

來源

2011-11-18 15:35:01 Graham

一個側面說明的一點：你需要對孩子的不透明度設置爲1.25，以彌補父母的不透明度0.8，而不是1.2。 – WhyNotHugo

一個可行的手段是設置所有文本的絕對定位的div是一個兄弟給你希望成爲透明的容器內。將它絕對放在容器上，設置Z索引，並確保父元素相對位置。

來源

2012-10-15 03:19:17

CSS透明度，如何在透明容器元素

回答

相關問題