[英]CSS Shadow applying to children background images
我已經為父標題元素使用了插入陰影
-webkit-box-shadow:inset 0px 0px 50px 10px #e5e5e55; box-shadow:inset 0px 0px 50px 10px #e5e5e5;
這對於父元素非常有效。 但是,我有一個子元素“ Logo”,其中背景圖像是JPG。 陰影將應用於圖像的頂部。 它之所以怪異,是因為它不應該應用,但是如果這樣做,我會懷疑它是否可以完全應用,好像它已經浸入陰影的一部分中了 ! 下圖突出顯示了正確的陰影(紫色線)和錯誤的陰影(紅色線)。
在此屏幕快照中,圖像是透明的PNG
我已經嘗試過Chrome,Firefox和IE,但所有這些都有問題。 我知道在那張照片中很難看到它,但是它確實使它看起來很精致。 我也嘗試過將圖像放置在元素中而不是背景圖像中,還嘗試使用JPG和PNG文件,但是結果都相同。
標頭的完整HTML代碼
<div id="header">
<div id="header-level-1">
<div id="header-logo">
<img src="images/logo.png">
</div>
<div id="header-contact">
<p class="header-contact-title">For More Information Call</p>
<p class="header-contact-phone"><a href="tel:xxx">xxx</a></p>
</div>
</div>
<div id="header-level-2">
<div id="header-nav">
</div>
</div>
</div>
全CSS
請注意,圖片當前位於元素中,而不是背景圖片,但是兩種方法的結果相同
#header {width:950px; height:220px; margin:0 auto; margin-top:30px; background-color:#fff; border-radius:15px; -webkit-box-shadow:inset 0px 0px 50px 10px #e5e5e55; box-shadow:inset 0px 0px 50px 10px #e5e5e5;}
#header-level-1 {width:950px;}
#header-level-2 {width:950px;}
#header-logo {width:700px; height:130px; display:inline-block; vertical-align:top;}
#header-contact {width:240px; height:100px; padding-top:30px; color:#76a410; font-size:1.3em; display:inline-block; vertical-align:top;}
#header-contact a:link {color:#00446e; text-decoration:none; font-weight:900; font-size:1.6em;}
#header-contact a:hover {text-decoration:underline; font-weight:800;}
.header-contact-title {display:block; padding:0px; margin:0px;}
.header-contact-phone {display:block; padding:0px; margin:0px; padding-top:5px;}
#header-nav {width:900px; margin-left:25px; height:66px; margin:0 auto; text-align:center; bottom:5px; position:relative; background:url('../images/nav-background.jpg'); border-radius:5px;}
#header-nav a:link, #header-nav a:visited, #header-nav a:active {color:#fff; text-decoration:none; padding-left:6px; padding-right:6px; padding-top:18px; display:inline-block;}
您可以在HTML元素上使用多個類。
為陰影創建一個新類,並僅在需要時添加它。
然后也可以在其他元素上重用...(如果您需要相同的陰影)。
CSS Shadow不適用於兒童背景圖片,這是由您用於徽標的.JPG圖片引起的。 您需要具有用於徽標的透明圖像,使用透明的.gif或.png文件。 我會推薦.PNG 。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.