RGBa與不透明度（具體來說是英國廣播公司滑塊）

我目前想知道哪個是最好的CSS屬性使用，不透明度或RGBa？更具體地說，我試圖重新創建類似於着名的BBC Home page slider的東西，它讓我思考他們爲什麼使用不透明度。RGBa與不透明度（具體來說是英國廣播公司滑塊）

在我的版本我已經跨越使用的代碼下面的兩個版本來了：

.left-button { 
    background: rgb(255, 255, 255) url('../images/left-arrow.png') no-repeat; //FALLBACK 
    background: rgba(255, 255, 255, 0.4) url('../images/left-arrow.png') no-repeat; 
}

或

.left-button { 
    background: #fff url('../images/left-arrow.png') no-repeat; //FALLBACK 
    opacity: 0.4; 
}

顯然，第二個使實際的按鈕圖像不透明過，這就是爲什麼我假設英國廣播公司已經爲按鈕製作了單獨的按鈕和背景蒙版（在我看來這是不必要的附加標記）。

我想使用RGBa的第一個版本。有人會指出爲什麼一個比另一個好，如果有任何兼容性問題，我不知道？

來源

2012-12-06 Rick Donohoe

Opacity被繼承到所有子項目，RGBa不是。如果子項目的透明度較低或不透明，請使用RGBa。

IE8及更低版本不支持RGBa，因此您可能需要不透明度備份計劃。

來源

2012-12-06 15:55:33

兩者都不是「更好」，因爲它們做不同的事情，所以它取決於你想要完成的事情。

opacity設置整個元素及其所有內容（文本，內嵌圖像等）的不透明度。 RGBa是一種定義具有特定級別透明度的顏色的方法。

因此，讓我們假設你有一個div：

<div>Hello!</div>

這將使整個div及其內容（「你好！」）50％的不透明：

div { 
    background: #000; 
    color: #fff; 
    opacity: 0.5; 
}

而這將使剛剛背景爲div 50％不透明，而文字爲100％不透明純白色：

div { 
    background: rgba(0, 0, 0, 0.5); 
    color: #fff; 
}

來源

2012-12-06 16:05:22 daGUY

RGBa與不透明度（具體來說是英國廣播公司滑塊）

回答

相關問題