如何使一個孩子的div不應該從父div繼承不透明？

大家好我創建了一個父div .ima其中一個div叫.txt當我給不透明度.ima然後不透明度自動適用於.txt這很明顯。但我不希望它以這種方式。如何使一個孩子的div不應該從父div繼承不透明？

只有.ima應該在0.5不透明度和文本.txt應該是100％可見。

有沒有辦法做到這一點？

這裏是fiddle

我試着在.txt給予不透明度爲1它不工作。我可能會以一種我不知道的錯誤方式來做這件事。任何幫助？

這裏我提到的不同的問題闖民宅可能的重複

有他們給了建議，使用RGBA但在這裏，我不想，如果我使用rgba那麼這個意願由於使用變成黑色或我們會提到的其他顏色。

我想在這裏使用背景圖片。

這是我建議的樣本。

這樣的事情是不可能的。

另外我不想使用.png圖像（半透明）。圖像可能會改變，這就是爲什麼。

任何方式謝謝你們在這裏給出了他們的答案。

來源

2013-08-05 sun

使孩子成爲父母的兄弟姐妹嗎？ – Prasanth

嘗試使用'>'選擇器。 – Nitesh

你不能這樣做，不透明是繼承。但是，您可以爲父級使用RGBA顏色或半透明圖像。 – MightyPork

創建一個PNG圖像（1px的/ 1px的）透明的60％的不透明度用photoshop和你的父母打電話DIV即

.ima{ 
    background:url(imagename.png) repeat 0 0; 
}

來源

2013-08-05 12:11:28

這是假定你只想.ima的背景是這樣做的最簡單的方法透明的，在這種情況下，您應該刪除opacity並建立一個值爲rgba(X%,X%,X%, .5)的background-colour，在這種情況下，.txt不會繼承任何東西，您可以繼續。

<div class="ima"> 
    <div class="txt"> 
     ... 
    </div> 
</div>

CSS透明背景：

.ima { 
    /* rgba is Red, Green, Blue, Alpha: 
    * put in your colour as RGB then add opacity at the end */ 
    background-color: rgba(255, 0, 0, .5); 
}

但是如果你想要一些.ima的孩子節點繼承透明度（例如文本，比.txt等要素），那麼最簡單的方法是創建匹配的.ima尺寸和應用opacity規則的直接後裔：

<div class="ima"> 
    <div class="txt"> 
     ... 
    </div> 
    <div class="ima__transparency"> 
     ... 
    </div> 
</div>

CSS：

.ima { 
    position: relative; 
} 

.ima__transparency { 
    position: absolute; 
    top: 0; 
    left: 0; 
    bottom: 0; 
    right: 0; 
    opacity: .5; 
} 

.txt { 
    position: relative; 
    z-index: 1; 
}

Example with background image。

來源

2013-08-05 12:16:44 Barney

謝謝，我想使用背景圖像不是顏色 – sun

@raj編輯的答案是更明確一點你如何實現這一目標。 – Barney

謝謝，我希望BG圖像透明，除此之外我不想讓任何孩子變得透明，我試過選擇器像'.ima .txt {values}'但沒有效果 – sun

你不能不能繼承不透明度，你的選擇是：

調整您的標記，這樣.txt不是.ima一個孩子，然後使用絕對定位
不要使用透明度，使.txt覆蓋相同的面積.ima並給予.txt半透明背景

如果您的目標受衆支持gradients和multiple backgrounds，you can layer an obscuring gradient over the image：

background: linear-gradient(rgba(255,255,255,0.5),rgba(255,255,255,0.5)), 
      url('http://www.bing.com/az/hprichbg/rb/NewportOR_ROW5865752464_1366x768.jpg');

使用這種方法，你其實只需要one div如果它只是文字，你要顯示的圖像。

來源

2013-08-05 12:18:54 robertc

+1，很好的解決方案！比漸變更好的是[純色圖像]（http://www.w3.org/TR/2012/CR-css3-images-20120417/#color-images），但它們似乎不如梯度:-( – Bergi

不幸的是因爲它是由設計繼承您不能使用透明度。

你可以，但是，如果你只是尋求使父DIV半透明使用RGBA顏色語法的背景色和舊版本的IE不支持語法的回退。

例如創建一個不透明度爲50％的白色背景。

.parent{ 
    background: rgba(255, 255, 255, 0.5); 
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#7FFFFFFF,endColorstr=#7FFFFFFF)"; /* IE8 */ 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#7FFFFFFF,endColorstr=#7FFFFFFF); /* IE6 & 7 */ 
    zoom: 1; 
} 

/* IE9 hack to remove filter */ 
.parent:not(dummy) { 
    filter: progid:DXImageTransform.Microsoft.gradient(enabled=false); 
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(enabled=false)"; 
}

濾鏡中的前兩個十六進制值表示背景的不透明度。有一個很好的解釋和rgba到十六進制轉換器here。

注的話語。使用這種技術可以揭示IE中的一個錯誤，如果將超鏈接放置在容器的背景上，超鏈接將通過容器的背景暴露出來，例如用於生成模型背景。

來源

2013-08-05 12:27:06

您可以使用：/後：前

HTML
<div>asdsadasd</div>
CSS

div{position:relative;} 
div:after{ 
content:''; 
position:absolute; 
top:0; 
left:0; 
width: 100%; 
height: 100%; 
background: #000; 
opacity:0.3; 
z-index: -1;}

來源

2013-08-05 12:37:10 Anon

的事情是，不透明度屬性適用於整個塊上。這意味着如果對任何子元素應用1不透明度，它將對其父項具有最大不透明度。

我建議你使用一個半透明PNG背景，並添加修復，使老版本的Internet Explorer處理不透明度：

.ima { 
    width:auto; 
    filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=crop, src='url_to_transparent_image.png'); 
} 

.ima[class] { 
    background-image:url('url_to_transparent_image.png'); 
} 

.txt { 
    color:white; 
}

也就是說，這只是如果你真的需要一個完全不透明的文本。您還可以將父級的不透明度設置得更高一些，這樣您的文本就不會太透明，並避免使用「髒」的CSS技巧。

來源

2013-08-05 12:37:40 Lapidouce

如何使一個孩子的div不應該從父div繼承不透明？

回答

相關問題