0

ページの上部に があるナビゲーション バーがありますが、背景の URL を持つ下box-shadowの要素には適用されないようです。section属性をコメント アウトするbackgroundと、ドロップ シャドウが表示されます。

コードペンは次のとおりです。 http://codepen.io/himmel/pen/ByxeGR

マークアップは次のとおりです。

<div class="header">
  <span class="brand">BRAND</span>
  <ul class="link">
    <li>Home</li>
    <li>About</li>
    <li>Contact</li>
  </ul>
</div>

<div class="blog-container">
  <section>

  </section> 
</div>

CSS は次のとおりです。

body {
  margin: 0;
}

.header {
  display: flex;
  align-items: center;
  font-family: 'Nunito';
  width: 100%;
  background-color: white;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
  height: 4em;
  .brand {
    font-size: 1.3em;
    padding-left: 1em;
  }
  .link {
    display: flex;
    list-style-type: none;
    flex: 1 auto; // stretch to end of width
    justify-content: flex-end;
    margin: 0;
    font-size: 1.3em;
    li {
      padding-right: 1em;
    }
  }
}

.blog-container {
  display: flex;
  flex-flow: column wrap;
  background: url(https://unsplash.imgix.net/photo-1414490929659-9a12b7e31907?q=75&fm=jpg&s=f838066e7aa9eab9d1ccc28fd5ec9574) no-repeat center center fixed;
  background-size: cover;
  section {
    height: 20em;
  }
}

背景画像の上にドロップ シャドウを表示するにはどうすればよいですか?

4

2 に答える 2

1

あなたのスタイルに加えることができposition: relative;ます。.header

http://codepen.io/anon/pen/YPLoGN

于 2015-02-25T16:47:37.010 に答える
1

コードペンであなたの例をフォークしました:リンク

position: relative;

正しく機能させるには、ヘッダーに位置を追加する必要があります。（z-indexも追加しましたが、relativeでも問題が解決しているようです。以下の著者のクレジット）

于 2015-02-25T16:48:43.597 に答える