我如何在CSS中製作不透明背景？

當彈出窗口加載整個背景時，我創建了facebook的彈出窗口，其顏色代碼爲#ccc;我也可以查看裏面的內容。在CSS中如何做到這一點是我試過的代碼。我如何在CSS中製作不透明背景？

#ptechsolfb {display:none; 
background-color:#ccc transparent; 
width:100%; 
height:100%; 
position:fixed; 
top:0; 
left:0; 
z-index:999999999; 
opacity: 1; }

我該怎麼做。任何一個將不勝感激。

來源

2013-05-30 Vignesh Pichamani

嘗試'不透明度0.5;' – Nitesh

不保留不透明度1.透明度1意味着透明..保持它介於.4和.6之間，看看會發生什麼 – alwaysLearn

@ Let'sCode no，opacity'0'表示透明。 '1'完全不透明。 –

對於背景透明度，您需要rgba顏色定義。這應該是這樣的：

background-color:rgba(200, 200, 200, 0.5);

其中前三個數字是紅色，綠色和藍色分量，第四號是「alpha通道」的透明度百分比。

但是，請注意，此語法在IE8或更早版本中不受支持。它在幾乎所有其他瀏覽器中都能正常工作，但IE8的支持可能會對您造成問題。

如果您需要支持IE8，我的建議是使用CSS3Pie，這是一個polyfill腳本，它爲舊功能的IE版本增加了對此功能的支持（以及其他一些功能）。

希望有所幫助。

來源

2013-05-30 09:54:47 Spudley

背景不透明度使用rgba來實現。舉例來說，這將創建一個黑色背景（#000或rgb(0,0,0)）與50％（0.5）不透明度：

element { 
    background-color:rgba(0, 0, 0, 0.5); 
}

JSFiddle example。

爲了讓#CCC（rgb(204, 204, 204)）75％不透明的背景下，你會使用：

element { 
    background-color:rgba(204, 204, 204, 0.75) 
}

來源

2013-05-30 09:31:47

正確的方法，僅使背景不透明的將是應用的rgba顏色：

background:rgba(204,204,204,0.5);

這相當於#ccc，但是是半透明的，因爲它的alpha值爲0.5。

如果更改整個div的opacity值，其內容也將變爲半透明，這不是預期的行爲。

來源

2013-05-30 09:32:58

+1正確答案。但是，請注意，這不適用於IE8或更早版本（除非使用填充） – Spudley

關於不透明度的值：

「指定的不透明度爲0.0（完全透明）到1.0（完全不透明）」

這裏是鏈接：http://www.w3schools.com/cssref/css3_pr_opacity.asp

，它不會工作就像你寫的：

background-color:#ccc transparent;

你必須從background-color屬性去除透明屬性附加傷害：

background-color:#ccc;

來源

2013-05-30 09:33:00 Gimmy

嘗試這樣的事：

.Background 
{ 
background-color:white; 
background: rgba(0, 0, 0, 0.5); 
}

來源

2013-05-30 09:34:40 7alhashmi

+1正確的答案。但是，請注意，這不適用於IE8或更早版本（除非使用填充） – Spudley

如果你想有一個（幾乎）跨瀏覽器的解決方案，你可以嘗試：

.alpha60 { 
    /* Fallback for web browsers that doesn't support RGBa */ 
    background: rgb(0, 0, 0); 
    /* RGBa with 0.6 opacity */ 
    background: rgba(0, 0, 0, 0.6); 
    /* For IE 5.5 - 7*/ 
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000); 
    /* For IE 8*/ 
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)"; 
}

凡IE瀏覽器，第一個十六進制對（ 99）控制不透明度。

來源here。

來源

2013-05-30 09:49:57 albertedevigo

我如何在CSS中製作不透明背景？

回答

相關問題