Div 70％不透明度，含有100％不透明度的圖像

我有div元素opacity: 0.7;。我設置了它，因爲我想讓它裏面的所有文本都是不透明的。在這div裏面我也想展示一些圖片，但是我想在這些圖片上有100％的不透明度，而不是0.7。我試圖通過設置opacity: 1;來顯示圖像，但無論如何它們都顯示爲不透明。Div 70％不透明度，含有100％不透明度的圖像

我該如何解決這個問題？我四處搜尋，但找不到任何解決方案。

由於

來源

2012-09-03 Masiar

與透明度（opacity < 1）的元素的子，不能比它的父不太透明。因此opacity: 1只會使子元素與其父元素同樣透明，但不會如此。

成具有部分透明的文字，你可以，而是使用：

div { 
    color: rgba(0,0,0,0.7); 
}

JS Fiddle demo。

我認爲這受到支持opacity屬性的相同瀏覽器的支持。

來源

2012-09-03 10:31:35

您可以在CSS中使用的背景和文本顏色rgba(0,0,0,0.7);顏色值：

div 
{ 
    background: rgba(100,12,100,0.7); 
    color: rgba(0,0,0,0.7); 
}

您可以轉換＃十六進位顏色代碼爲rgb here。

http://jsfiddle.net/Kyle_Sevenoaks/FQKXv/

FOR IE

您可以使用自己的代碼filter：

div 
{ 
     background:transparent; 
     filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#55992200,endColorstr=#55992200); 
     zoom: 1; 
}

十六進制值有8位，而不是6.最後兩個alpha值。適應口味。

來源

2012-09-03 10:32:01 Kyle

但需要提及的是，它不會在IE中工作。 – aspirinemaga

哪個版本的IE？ – Kyle

ie6，ie7和ie8不支持'rgba'。它從ie9開始工作。 – aspirinemaga

爲

使用RGBA代碼，它是一個CSS3屬性和舊瀏覽器，如IE7，IE8不支持它

R= red 
G= green 
B= blue 
A= alpha 

div { 
    background: rgba(200, 54, 54, 0.5); 
}

來源

2012-09-03 10:34:13 Carlos

嗨，我提的財產通過它可以增加和減少家長的不透明度容器背景並且不會影響子容器。這很簡單，看到CSS基本上你不得不在背景&阿爾法透明度使用rgb顏色。

CSSbackground:rgba(0,0,0,0.1);

或看演示： - http://jsfiddle.net/8LFLd/102/

來源

2012-09-03 11:06:42

至於說通過幾十個問題的幾百倍：

.transparent { 
    /* 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.7); 
    /* For IE 5.5 - 7*/ 
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#70000000, endColorstr=#99000000); 
    /* For IE 8*/ 
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#70000000, endColorstr=#99000000)"; 
}

這是跨瀏覽器的解決方案。

來源

2012-09-03 11:31:16 albertedevigo

Div 70％不透明度，含有100％不透明度的圖像

回答

相關問題