![](/img/trans.png)
[英]How to create a table with two internal embedded imgclass items with different opacities?
[英]How do you add different opacities to nested items?
我在HTML中有兩個嵌套項目,我想給出一個不透明度為0.8的不透明度和一個不透明度為1的內容。
我想我明白為什么它不起作用,但是,我怎么能模仿這種效果呢?
這是一個簡化的HTML,顯示問題,我希望綠色方塊是實心的。
<div style='background-color:red;
width: 500px;
height: 500px;
border: 1px solid black;
position: absolute;
top:0;
left:0;
opacity:0.8'>
<div style='width:150px; height:150px; background-color:green; opacity:1'>
Some content
</div>
</div>
如果使用rgba
CSS屬性而不是opacity屬性,則可以實現以下目的:
<div style='background-color:rgba(0, 255, 0, 0.8) ;width: 500px; height: 500px; border: 1px solid black; position: absolute; top: 0; left: 0'>
<div style='position: relative; width: 150px; height: 150px; background-color: rgba(0, 0, 255, 1);'>aaaaaaaaa<br>aaaaaaaaa<br></div>
</div>
演示: http : //jsfiddle.net/ScHgC/
你總是可以擁抱漸進增強,並在背景顏色上使用rgba
// this will only affect the div it's applied to and not it's contents
background-color: rgba(0,0,0,0.8)
使用CSS2
我為你准備了一個演示了一個關鍵概念的演示:
http://jsfiddle.net/audetwebdesign/pN69F/
您可以首先添加一個wrapper
div來定位兩個封閉的div, outer
和inner
。 outer
位於inner
之前,這意味着inner
將位於outer
(除非您調整z-index值)。
您可以將不透明度設置為outer
div,這將允許任何背景文本或圖像部分可見。 將inner
div的不透明度設置為1.0以獲得完全飽和的着色。
我認為大多數瀏覽器都支持不透明度,但請查看http://www.quirksmode.org/css/opacity.html以獲取特定於供應商的CSS屬性以處理IE怪癖。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.