![](/img/trans.png)
[英]Reading border color value form parent's background-color, and transparent parent's background-color
[英]Image inside transparent background-color without being affected
我想做的是在圖像中制作背景色(具有不透明性),有一種方法可以實現這一目標而不受背景色的影響? 這里的問題是具有不透明性的背景色,它使所有內容透明,包括文本和圖像。
這是我的代碼:
CSS
div.Image { background: url("http://fc07.deviantart.net/fs43/i/2009/141/e/e/Vista_orb_by_fediaFedia.png")center center no-repeat; background-size: 40px 40px; position: relative; background-position: 50% 0px; } div.trans-bg { background-color: #646464; opacity: 0.5; border-radius: 3px; border: 2px ridge #7AC3D1; position: absolute; } div.trans-bg p { text-shadow: 1px 2px 2px #000; margin: 5%; padding-top: 45px; width: 100px; color: #fff; text-align: center; }
<div class="trans-bg"> <div class="Image"> <p>Windows 7</p> </div> </div>
嘗試使用rgba而不是不透明度。
background-color: rgba(100, 100, 100, 0.29);
不透明度會更改塊級元素中包含的所有內容,而使用RGBA設置不透明度會更改元素本身的不透明度。
第一。 您還希望刪除父div上的反對。 這將影響所有子div。 這就是為什么圖像div上的BG顏色會受到影響的原因。
div.trans-bg {
background-color: #646464;
opacity: 0.5;
border-radius: 3px;
border: 2px ridge #7AC3D1;
position: absolute;
}
接下來,您將要使用background-color設置顏色而不影響image div上的image BG css。
background-color: #000;
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.