CSS不透明屬性

您好，我使用的CSS不透明屬性的div標籤，它的效果很好，但問題是，當我寫一些文本或粘貼圖像的div標籤，他們也變得褪色。我只需要div背部顏色淡入淡出而不是div內容。我的代碼是...CSS不透明屬性

#fade div 
{ 
opacity:0.1; 
filter:alpha(opacity=10); /* For IE8 and earlier */ 
width:750px; 
height:150px; 
background-color:#FFFFFF; 
} 

#text in fade div 
{ 
font-weight:bold; 
color:#8A2BE2; 
}

Thankyou !!!

來源

2011-11-23 h_a86

你能使用CSS3或者你需要儘可能廣泛可見？ – BumbleShrimp

如果你把文本/圖像放在那個div裏，div變成了父對象，並且它包含了父對象的屬性，從而可以理解問題創建[jsfiddle]（http://jsfiddle.net） – punit

相關內容：http：/ /css-tricks.com/rgba-browser-support/ – 2rs2ts

使用rgba()或透明PNG作爲背景會容易得多。

rgba(0, 0, 0, .1); 
rgba(0, 0, 0); //fallback

來源

2011-11-23 06:01:03

這是一個很好的解決方案。查看此鏈接以獲取更多信息：http://robertnyman.com/2010/01/11/css-background-transparency-without-affecting-child-elements-through-rgba-and-filters/ – Grrbrr404

當然，不透明度也適用於子元素。你可以做的是分流你的標記。

<div id='Div-With-Opacity-set'> 
</div> 
<div id='Child-Elements-for-the-above-div'> 
</div>

仔細對齊您的標記，使標記類似於你想要的。

來源

2011-11-23 06:01:10

可以使用rgba()屬性是：

這樣寫：

#fade div 
{ 
background-color: rgba(0,0,0,0.1); 
width:750px; 
height:150px; 
background-color:#FFFFFF; 
}

對於IE，你可以使用IE filter

background: transparent;-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#19000000,endColorstr=#19000000)"; /* IE8 */ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#19000000,endColorstr=#19000000); /* IE6 & 7 */  zoom: 1;

你可以從這裏http://kimili.com/journal/rgba-hsla-css-generator-for-internet-explorer/

生成您的過濾器

來源

2011-11-23 06:01:43 sandeep

此代碼是否有效？ – lalibi

是的;它是有效的rgba是一個css3屬性和過濾器，我們使用IE – sandeep

是的，但不應該像'background-color：rgba（0,0,0,0.1）;' – lalibi

你爲什麼不重新設置不透明度呢？

#text in fade div 
{ 
    font-weight:bold; 
    color:#8A2BE2; 
    opacity:1; 
    filter:alpha(opacity=100); /* For IE8 and earlier */ 
}

來源

2011-11-23 06:01:44 lalibi

這不起作用。無論如何，「不透明」並不是遺產。 – 2rs2ts

只需使用1px半透明gif並重復x和y。據我所知，這是設置半透明背景最簡單的方法。

來源

2011-11-23 06:02:20 bbrodriges

沒有CSS3的最好賭注可能是創建一個div，並把另一個div放在它的頂部，但不是嵌套在它的內部。透明度設置後，不透明度會過濾到元素內的所有元素。

如果你立刻把右邊的div放到右邊，然後給它一個-750px的邊距，你可以給它一個不透明的1，但是它後面的div可以有0.1的不透明度，這可以工作精細。

有了CSS3，你可以這樣做：

#fade 
{ 
width:750px; 
height:150px; 
background-color: rgba(255,255,255,0.1); 
}

，只是背景將是0.1的不透明度。文本仍然是1.

我個人最經常做的事情是，我創建一個帶有我想要的透明背景的小.png，然後將該.png設置爲元素的背景。在Photoshop中，我可以將白色背景的不透明度設置爲0.1，然後保存50X50的正方形，然後獲得幾乎完美的透明度（無IE6）。

來源

2011-11-23 06:03:44 BumbleShrimp

像http://jsfiddle.net/PWM5f/你需要

來源

2011-11-23 06:26:51 punit

CSS不透明屬性

回答

相關問題