CSS Тень применение детей фоновых изображений

Question

Я использовал вставку тень для родительского элемента заголовка

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

Это работает хорошо для родительского элемента. Однако у меня есть дочерний элемент «Логотип», где фоновое изображение представляет собой 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;} 

Answer 1

Вы можете используйте несколько классов в HTML-элементах.

Создайте новый класс только для тени и добавьте его только там, где вам нужно.

Он также может использоваться повторно на других элементах ... (если вам понадобится одна и та же тень).

Answer 2

CSS Shadow не относится к образам детей, это вызвано .JPG изображение, которое вы используете для логотипа. Вам нужно иметь прозрачное изображение для логотипа, использовать прозрачный .gif или .png файл. Я бы порекомендовал .PNG.