1

親ヘッダー要素にインセット シャドウを使用しました

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

2 に答える 2

0

HTML 要素で複数のクラスを使用できます。

シャドウ専用の新しいクラスを作成し、必要な場所にのみ追加します。

他の要素で再利用することもできます... (同じ影が必要な場合)。

于 2013-02-11T12:25:36.850 に答える
0

CSS シャドウが子の背景画像に適用されません。これは、ロゴに使用している.JPG画像が原因です。ロゴには透明な画像が必要です。透明な.gifまたは.pngファイルを使用してください。.PNGをお勧めします。

于 2013-02-11T13:24:46.683 に答える