css实现视觉差效果

li拜天儿

于 2023-10-27 11:45:03 发布

阅读量149

点赞数 1

文章标签： css 前端

本文链接：https://blog.csdn.net/weixin_70238655/article/details/134072971

版权

使用的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;
}