2013-02-12 68 views
0

如何將不透明度添加到以下CSS語句中?如何在背景上添加不透明度?

background: none repeat scroll 0 0 #205081; 

css2有沒有可能?否則,我該如何在css3中添加不透明度聲明?

+0

請記住,RGB背景不適用於舊版本的IE,請告訴我是否需要所有解決方案。 – 2013-02-12 10:25:11

+0

嗯我還不知道。如果你有時間可以添加一個完整的例子來收集這裏收集的所有內容供其他人蔘考。 – membersound 2013-02-12 10:26:50

回答

1

可悲的是,以因各種版本,並在全球瀏覽器類型不存在在所有瀏覽器上兼容的單個CSS條目,無需JavaScript干預。但是,您可以使用多種造型技術,並且使用'if IE 7'HTML來解決不喜歡現代代碼的瀏覽器。

以下是您應該考慮的各種方法,以實現跨瀏覽器的最大兼容性。

增加對舊的瀏覽器

的另一種方法。如果你想在Internet Explorer的更高版本的透明背景的easist方法是樣式舊版本使用舊代碼的瀏覽器。您可以通過在您的HTML或PHP文件的

<head> 
</head> 

部分中添加以下代碼來過濾樣式規則。

HTML中的HEAD

您應該添加以下代碼,如果你沒有它已經到位。現在許多框架和CMS都包含這些功能,因此只需在編輯之前查看源代碼,並只在其不是已有的時候才添加。

<!--[if lt IE 7 ]><html class="ie ie6 no-js" lang="en"> <![endif]--> 
<!--[if IE 7 ]><html class="ie ie7 no-js" lang="en"> <![endif]--> 
<!--[if IE 8 ]><html class="ie ie8 no-js" lang="en"> <![endif]--> 
<!--[if IE 9 ]><html class="ie ie9 no-js" lang="en"> <![endif]--> 

做一個透明的50%PNG文件

只需加載任何Photoshop或任何不錯的選擇,並作出新的文件1x1像素的,然後添加一個新層,並刪除背景。然後在圖層中填充您想要使用的顏色,然後使該圖層具有50%的不透明度。然後將其保存爲PNG並上傳到您的主機。如果您擔心頁面上的加載時間,那麼您可以使用PNGCrush或Smush.it將該PNG壓縮到小於0.5kb。

在你的CSS添加這個(您將需要使用IF 7/6等)

.ie6, .ie7, .ie8 .your-div-class-or-id { 
    background: transparent; 
    filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=background.png,sizingMethod='scale'); 
} 

}

CSS對於新的瀏覽器

您應該使用新代碼對於較新的瀏覽器,只要有可能,並且不使用PNG來提供透明背景,這意味着我們不會通過添加文件提取來增加頁面加載時間。只需添加:

background: rgba(32, 80, 129, 0.5) 

將與現代的瀏覽器,如IE9 +,火狐,Chrome,Safari瀏覽器

您應結合使用現代和較舊的CSS工作

請注意,您使用這兩個CSS元素RGBA和AlphaImageloader,所以PNG文件只在絕對需要的時候使用,我知道很多人對於使用不透明度的PNG是不利的,但是隻有在最壞的情況下使用PNG,而在較新的瀏覽器時不加載用過的。

2

使用rgba()。在你的情況

背景:RGBA(32,80,129,1)

其中最後數量爲不透明度。 1是完全不透明的,0是不可見的。所以,如果你想有50%不透明的將是

背景:RGBA(32,80,129,0.5)

+0

很好,這可能是我在找的東西。 – membersound 2013-02-12 10:24:08