CSS阴影应用于儿童背景图像

Question

我为父标题元素

使用了插入阴影

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

Answer 1

您可以在HTML元素上使用多个类。

仅为阴影创建一个新类，并将其添加到您需要的位置。

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

Answer 2

CSS Shadow不适用于儿童背景图片，它是由您用于徽标的 .JPG 图片引起的。您需要为徽标设置透明图像，使用透明的 .gif 或 .png 文件。我会推荐 .PNG 。