这个问题有两个方面,一个是技术问题,一个是主观问题,这首先是技术问题:
我希望标题渐变与内容渐变对齐,以便看起来无缝,因此我需要为两者设置单独的渐变配置。在此示例中,您可以看到,如果我对两个元素都应用相同的渐变,则会有明显的区别。这是JSFiddle:https://jsfiddle.net/g73s04vd/
这是我正在使用的代码:
<style>
.header {
color: white;
height: 100px;
background: linear-gradient(159.17deg, #022461 -9.41%, #455c9a 97.45%);
}
.content {
color: white;
height:500px;
background: linear-gradient(159.17deg, #022461 -9.41%, #455c9a 97.45%);
}
</style>
<div class="header">
This is the header
</div>
<div class="content">
This is the content
</div>
如何配置每个渐变,以便标题和内容之间没有区别?
第二个问题:由于内容将滚动到标题的下方,因此,由于没有定义行,因此看起来就像“消失了”。从美学的角度来看,我是否应该考虑以这种方式设置页面格式?
感谢您的任何输入。
您应该在具有背景渐变的两个div周围添加一个容器div: