我试图在两个容器之间添加线性渐变/叠加，以创建页面从上到下具有单个背景的印象。
我发现这具有挑战性，因为两个容器都必须为100vh，但不知何故必须包括绿色的叠加部分。
任何建议/提示将不胜感激。
这是我要实现的目标：
示例1：https://ibb.co/frbLb7
示例2：https://ibb.co/czsJw7
谢谢。
<body>
<div class="homepage">
<div class="content">
Lorem ipsum
</div>
<!-- End content -->
<div class="green-overlay">
</div>
<!-- End homepage -->
<div class="second-section">
<div class="content">
</div>
<!-- end green-overlay -->
Lorem ipsum
</div>
<!-- End content -->
</div>
<!-- End second section-->
</body>
.homepage {
height: 100% //fallback
height:100vh;
background: url("img/homepage.jpg");
background-size: cover;
}
.green-overlay {
height: 25vh;
background: linear-gradient(to bottom, rgba(100, 244, 2, 0.1), rgba(100, 244, 2, 1));
}
.second-section {
height: 100% //fallback
height:100vh;
background-color: rgba(100, 244, 2, 1);
}
最佳答案
使用CSS伪类read more about it
在jsfiddle.net处检查此代码
这是代码：
body {
margin: 0;
padding: 0
}
.homepage {
height: 100%;
height: 100vh;
background: url("https://picsum.photos/3872/2592?image=1072");
background-size: cover;
}
.second-page::after {
display: block;
position: relative;
background-image: linear-gradient(to bottom, rgba(100, 244, 2, 0.0), rgba(100, 244, 2, 1));
margin-top: -135px;
height: 120px;
width: 100%;
content: '';
}
.second-page {
height: 100%;
height: 100vh;
background-color: rgba(100, 244, 2, 1);
} <body>
<div class="homepage">
<div class="content">
Lorem ipsum
</div>
<!-- End content -->
<div class="green-overlay">
</div>
<!-- End homepage -->
</div>
<!-- End second page -->
<div class="second-page">
<div class="content">
</div>
<!-- end green-overlay -->
Lorem ipsum
</div>
<!-- End content -->
</body>关于html - 在两个容器之间添加线性渐变/叠加部分，使它们看起来像一个，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/50120911/