使用的background-attachment
background-attachment是CSS的一个属性,用于指定背景图像的滚动方式。该属性可以设置为fixed、scroll或local。
- fixed:背景图像固定不动,即使页面滚动也不会改变其位置。
- scroll:背景图像随着页面滚动而滚动,与页面内容一起移动。
- local:背景图像随着元素内容滚动而滚动,而不是整个页面滚动。
默认值为scroll。
可以实现视觉差效果
效果:
代码:
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<div class="content">
<div>
<h3>风景</h3>
<p>风景的美好</p>
</div>
</div>
<div class="bg bg1">
<p>山水</p>
</div>
<div class="content">
微风吹来,鸭绿江面上便泛起朵朵浪花,发出有节奏的哗哗声,好像一支乐曲,悦耳动听。
</div>
<div class="bg bg2">
<p>湖水</p>
</div>
<div class="content">
有人说高山上的湖水是淌在地球表面上的一颗眼泪,那么我枕畔的眼泪就是挂在你心头的一面湖水。如果爱上你是个错误,那让我独自去承受
</div>
<div class="bg bg3">
<p>黄昏</p>
</div>
<div class="content">
迷人的黄昏过后便是恋人的晚霞。
</div>
</body>
</html>
css:
html,body{
margin: 0;
height: 100%;
width: 100%;
}
.bg{
width: 100%;
height: 100vh;
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
display: flex;
justify-content: center;
align-items: center;
color: #fff;
font-size: 2em;
}
.bg1{
background-image: url('./img/1.png');
}
.bg2{
background-image: url('./img/7.jpg');
}
.bg3{
background-image: url('./img/10.png');
}
.content{
width: 100%;
height: 30%;
padding: 0 100px;
background-color: #333;
color: #fff;
display: flex;
align-items: center;
justify-content: center;
box-sizing: border-box;
line-height: 30px;
}
h3{
font-size: 2.5em;
}