如何制作顶部黑色覆盖的全高图像(从上到中到下(
0% ->35% -> 0%
<header style="background: url(...image..);">
<h2>title</h2>
<p>description...</p>
</header>
我只是用black overlay
代码编写一个基本的background-image
。试试这个,希望它能帮助你。谢谢
header {
background-repeat: no-repeat;
background-size: cover;
color: #fff;
display: flex;
align-items: center;
height: 100vh;
position: relative;
width: 100%;
}
header:before {
background-image: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,0.35), rgba(0,0,0,0));
content: '';
position: absolute;
left: 0;
top: 0;
opacity: 0.5;
height: 100%;
width: 100%;
}
.content {
margin-left: 20px;
position: relative;
}
<header style="background-image: url('https://images.unsplash.com/photo-1476820865390-c52aeebb9891?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80')">
<div class="content">
<h2>Title</h2>
<p>Description...</p>
</div>
</header>