CSS陰影適用於兒童的背景圖片

我使用的插圖陰影父頭元素CSS陰影適用於兒童的背景圖片

-webkit-box-shadow:inset 0px 0px 50px 10px #e5e5e55; box-shadow:inset 0px 0px 50px 10px #e5e5e5;

這已經很好地工作了父元素。不過，我有一個背景圖像爲JPG的子元素「徽標」。陰影應用於圖像的頂部。它的奇怪，因爲它不應該適用，但如果它，我會懷疑它完全適用，它看起來像它已被蘸到部分影子！下圖強調了正確的陰影（紫色線條）和錯誤的陰影（紅線）。

在這個截屏中的圖像是一個透明的PNG

enter image description here

我已經試過的Chrome，Firefox和IE瀏覽器都具有的問題。我知道這張照片有點難以看到，但它確實使它看起來沒有定義。我也嘗試將圖像放置在元素中，而不是背景圖像，以及嘗試JPG和PNG文件，但都具有相同的結果。爲頭

<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

注意的圖像是當前在元件相對於背景圖像，但同樣的結果無論哪種方式

HTML完整代碼

#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;}

來源

2013-02-11 tim.baker

六個打開的'div'標籤，只有五個關閉 – Sugar 2013-02-11 12:25:58

對不起，這只是複製和粘貼錯誤 – 2013-02-11 12:26:30

是啊糖是正確的......這不是你正在談論它的影子，因爲它的JPG圖像..只是將您的圖像轉換爲PNG（透明）來糾正它。 – Kingk 2013-02-11 13:28:32

您可以在HTML元素上使用多個類。

只爲影子創建一個新類，並只在需要的地方添加它。

它也可以在其他元素上重用...（如果您需要相同的陰影）。

來源

2013-02-11 12:25:36

這不是問題，他們不共享多個id/classess，如果肯定它會完全適用於圖像，它會是整個過程呢？ – 2013-02-11 12:28:38

CSS Shadow不適用於兒童背景圖片，它是由您正用於徽標的.JPG圖片造成的。您需要有透明的徽標圖片，請使用透明.gif或.png文件。我會推薦.PNG。

來源

2013-02-11 13:24:46 Amit

我已經使用了透明的PNG，結果相同！任何想法爲什麼它是這樣應用？ – 2013-02-11 13:57:04

如果你能分享更好的屏幕截圖，那將會很棒。 – Amit 2013-02-11 19:47:34

CSS陰影適用於兒童的背景圖片

回答

相關問題