html - 如何在中心和左对齐背景覆盖图像上制作带有垂直文本的全高图像
问题描述
如何制作顶部有黑色覆盖的全高图像(从上到中到下)
0% -> 35% -> 0%
<header style="background: url(...image..);">
<h2>title</h2>
<p>description...</p>
</header>
解决方案
background-image
我只是用black overlay
代码写一个基本的。试试这个,希望能帮到你。谢谢
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>