[英]CSS Drop-Shadow on nav with background image
I've got a navigation bar at the top of the page that has a box-shadow
, but it doesn't seem to apply to the section
element below with a background url. 我在页面顶部有一个带有
box-shadow
的导航栏,但是它似乎不适用于带有背景URL的以下section
元素。 If I comment out the background
attribute, the drop shadow is apparent. 如果我注释掉
background
属性,则阴影很明显。
Here is the codepen: http://codepen.io/himmel/pen/ByxeGR 这是codepen: http ://codepen.io/himmel/pen/ByxeGR
Here is the markup: 这是标记:
<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>
And here is the CSS: 这是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;
}
}
How can I get the drop shadow to appear over the background image? 如何使阴影显示在背景图像上?
You could add position: relative;
您可以添加
position: relative;
to your .header
style. 您的
.header
样式。
http://codepen.io/anon/pen/YPLoGN http://codepen.io/anon/pen/YPLoGN
I forked your example on codepen: Link 我在codepen上分了您的示例: 链接
position: relative;
You need to add position to the header for it to work properly. 您需要在页眉中添加位置以使其正常工作。 (I added z-index, as well but relative seems to fix your issue as well. Credits for author below me)
(我也添加了z-index,但相对似乎也解决了您的问题。我下面的作者表示感谢)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.