CSS 带有背景图片的导航栏上的投影
CSS Drop-Shadow on nav with background image
我在页面顶部有一个带有 box-shadow
的导航栏,但它似乎不适用于下面带有背景 [=28] 的 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;
}
}
如何让投影出现在背景图片上?
您可以将 position: relative;
添加到您的 .header
样式中。
我在 codepen 上 fork 你的例子:Link
position: relative;
您需要在页眉中添加位置才能正常工作。 (我也添加了 z-index,但 relative 似乎也解决了你的问题。感谢我下面的作者)
我在页面顶部有一个带有 box-shadow
的导航栏,但它似乎不适用于下面带有背景 [=28] 的 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;
}
}
如何让投影出现在背景图片上?
您可以将 position: relative;
添加到您的 .header
样式中。
我在 codepen 上 fork 你的例子:Link
position: relative;
您需要在页眉中添加位置才能正常工作。 (我也添加了 z-index,但 relative 似乎也解决了你的问题。感谢我下面的作者)