css实现视觉差

什么是视觉差？不明白的可以看一下这个网站

视觉差网站
是不是感觉有点高大上的感觉？
那们今天来写一些简单的视觉差案列
首先我们需要找几张高逼格的图片
然后将它作为背景应用到网页上去
首先我们需要四个盒子 盒子下面跟着内容盒

	<div class="img1"></div>
	<section class="section"></section>
    <div class="img2"></div>
    <section class="section"></section>
    <div class="img3"></div>
    <section class="section"></section>
    <div class="img4"></div>

接下来就去写样式吧
首先给它默认样式设置一下
然后给四个div都设置上不同的背景图片

实现视觉差最关键的一个属性background-attachment: fixed;

这个默认是scroll 我们给它设置成fixed

html,body{
    height: 100%;
    margin: 0;
    font-size: 16px;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    line-height: 1.8em;
    color: #666;
}

.img1{
    background: url('./img/pexels-chait-goli-2093323.jpg') no-repeat center;
    min-height: 100%;
    background-size: cover;
    position: relative;
    opacity: 0.7;
    background-attachment: fixed;

}
.img2{
    background: url('./img/pexels-daria-shevtsova-1070945.jpg') no-repeat center;
    min-height: 400px;
    background-size: cover;
    position: relative;
    opacity: 0.7;
    background-attachment: fixed;
}
.img3{
    background: url('./img/pexels-ricardo-esquivel-1563256.jpg') no-repeat center ;
    min-height: 100%;
    background-size: cover;
    position: relative;
    opacity: 0.7;
    background-attachment: fixed;
}
.img4{
    background: url('./img/pexels-burst-373893.jpg') no-repeat center;
    min-height: 100%;
    background-size: cover;
    position: relative;
    opacity: 0.7;
    background-attachment: fixed;
}

现在我们需要给下面的内容盒子添加一些随便写的内容

  <div class="img1">
        <div class="ptext">
            <span class="border">
                Made in China
            </span>
        </div>
    </div>
    <section class="section section-1">
        <h2>个人在线</h2>
        <p>Lorem ipsum dolor, sit amet consectetur adipisicing 
            elit. Consequatur vero commodi, incidunt ut a sed.
             Cupiditate eaque inventore, repudiandae nihil magni 
             quo dolores veritatis! Maiores, ab nam? Similique 
             quidem repellat aut sit, assumenda et accusamus vero,
              ab, sequi itaque ut culpa libero possimus alias 
              delectus accusantium est. Explicabo, quibusdam
               commodi. Ab consequatur, accusantium adipisci
                consectetur molestiae tempora beatae modi totam
                 natus corrupti, veniam, officia aliquid architecto
                 aceat libero molestias. Mollitia voluptate quia 
                 accusantium voluptatum doloribus earum placeat ullam
                  illo temporibus consequuntur. Ipsa deserunt 
                  architecto aliquam doloribus eveniet voluptates culpa
                  sequuntur nemo pariatur eos maiores ad ex sequi hic ut
                   animi, impedit eum debitis vel fugit voluptate! Eos quo 
                   voluptas aspernatur in iste maxime consequuntur molestiae
                    fugiat doloribus veritatis ipsum ducimus nobis voluptatem atque animi, 
                    est rerum numquam sapiente error distinctio nostrum dolor? Illo reprehenderit doloribus vero repellat
                     incidunt vel repudiandae possimus reiciendis ducimus nisi autem repellendus commodi unde, libero ea?
                      Eum incidunt illo repellendus cumque? Nam omnis officiis eos, ad laudantium magnam, vero dolorem mollitia
                       amet rem temporibus, inventore eaque et molestias enim velit incidunt facilis. Officia blanditiis ea saepe in
                        totam praesentium fugit fugiat inventore rerum expedita ipsum natus dolor fuga quia nisi
                    repudiandae a dignissimos nulla, veniam reprehenderit.</p>
    </section>
    <div class="img2">
        <div class="ptext">
            <span class="border">
                    Image Two
            </span>
        </div>
    </div>
    <section class="section section-2">
        <h2>个人在线</h2>
        <p>Lorem ipsum dolor, sit amet consectetur adipisicing 
            elit. Consequatur vero commodi, incidunt ut a sed.
                Cupiditate eaque inventore, repudiandae nihil magni 
                quo dolores veritatis! Maiores, ab nam? Similique 
                quidem repellat aut sit, assumenda et accusamus vero,
                ab, sequi itaque ut culpa libero possimus alias 
                delectus accusantium est. Explicabo, quibusdam
                commodi. Ab consequatur, accusantium adipisci
                consectetur molestiae tempora beatae modi totam
                    natus corrupti, veniam, officia aliquid architecto
                    aceat libero molestias. Mollitia voluptate quia 
                    accusantium voluptatum doloribus earum placeat ullam
                    illo temporibus consequuntur. Ipsa deserunt 
                    architecto aliquam doloribus eveniet voluptates culpa
                    sequuntur nemo pariatur eos maiores ad ex sequi hic ut
                    animi, impedit eum debitis vel fugit voluptate! Eos quo 
                    voluptas aspernatur in iste maxime consequuntur molestiae
    </section>
    <div class="img3">
        <div class="ptext">
            <span class="border">
                Image Three
            </span>
        </div>
    </div>
    <section class="section section-2">
        <h2>个人在线</h2>
        <p>Lorem ipsum dolor, sit amet consectetur adipisicing 
            elit. Consequatur vero commodi, incidunt ut a sed.
                Cupiditate eaque inventore, repudiandae nihil magni 
                quo dolores veritatis! Maiores, ab nam? Similique 
                quidem repellat aut sit, assumenda et accusamus vero,
    </section>
    <div class="img4">
        <div class="ptext">
            <span class="border">
                Image Four
            </span>
        </div>
    </div>

css样式

section{
    text-align: center;
    padding: 50px 80px;
}
.section-1{
    background-color: #f4f4f4;
    color: #666;
}
.ptext{
    position: absolute;
    top: 50%;
    width: 100%;
    text-align: center;
    color: #000;
    font-size: 27px;
    letter-spacing: 8px;
    text-transform: uppercase;
}
.img1 .ptext .border{
    background-color: #111;
    color: #fff;
    padding: 20px;
}
.img4 .ptext .border{
    background-color: #111;
    color: #fff;
    padding: 20px;
}

整体代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <!-- <link rel="stylesheet" href="./css/index.css"> -->
    <style>

html,body{
    height: 100%;
    margin: 0;
    font-size: 16px;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    line-height: 1.8em;
    color: #666;
}

.img1{
    background: url('./img/pexels-chait-goli-2093323.jpg') no-repeat center;
    min-height: 100%;
    background-size: cover;
    position: relative;
    opacity: 0.7;
    background-attachment: fixed;

}
.img2{
    background: url('./img/pexels-daria-shevtsova-1070945.jpg') no-repeat center;
    min-height: 400px;
    background-size: cover;
    position: relative;
    opacity: 0.7;
    background-attachment: fixed;
}
.img3{
    background: url('./img/pexels-ricardo-esquivel-1563256.jpg') no-repeat center ;
    min-height: 100%;
    background-size: cover;
    position: relative;
    opacity: 0.7;
    background-attachment: fixed;
}
.img4{
    background: url('./img/pexels-burst-373893.jpg') no-repeat center;
    min-height: 100%;
    background-size: cover;
    position: relative;
    opacity: 0.7;
    background-attachment: fixed;
}
/* .pimg1,.pimg2,.pimg3.pimg4{

} */
section{
    text-align: center;
    padding: 50px 80px;
}
.section-1{
    background-color: #f4f4f4;
    color: #666;
}
.ptext{
    position: absolute;
    top: 50%;
    width: 100%;
    text-align: center;
    color: #000;
    font-size: 27px;
    letter-spacing: 8px;
    text-transform: uppercase;
}
.img1 .ptext .border{
    background-color: #111;
    color: #fff;
    padding: 20px;
}
.img4 .ptext .border{
    background-color: #111;
    color: #fff;
    padding: 20px;
}
</style>
    <title>Document</title>
</head>
<body>
    <div class="img1">
        <div class="ptext">
            <span class="border">
                Made in China
            </span>
        </div>
    </div>
    <section class="section section-1">
        <h2>个人在线</h2>
        <p>Lorem ipsum dolor, sit amet consectetur adipisicing 
            elit. Consequatur vero commodi, incidunt ut a sed.
             Cupiditate eaque inventore, repudiandae nihil magni 
             quo dolores veritatis! Maiores, ab nam? Similique 
             quidem repellat aut sit, assumenda et accusamus vero,
              ab, sequi itaque ut culpa libero possimus alias 
              delectus accusantium est. Explicabo, quibusdam
               commodi. Ab consequatur, accusantium adipisci
                consectetur molestiae tempora beatae modi totam
                 natus corrupti, veniam, officia aliquid architecto
                 aceat libero molestias. Mollitia voluptate quia 
                 accusantium voluptatum doloribus earum placeat ullam
                  illo temporibus consequuntur. Ipsa deserunt 
                  architecto aliquam doloribus eveniet voluptates culpa
                  sequuntur nemo pariatur eos maiores ad ex sequi hic ut
                   animi, impedit eum debitis vel fugit voluptate! Eos quo 
                   voluptas aspernatur in iste maxime consequuntur molestiae
                    fugiat doloribus veritatis ipsum ducimus nobis voluptatem atque animi, 
                    est rerum numquam sapiente error distinctio nostrum dolor? Illo reprehenderit doloribus vero repellat
                     incidunt vel repudiandae possimus reiciendis ducimus nisi autem repellendus commodi unde, libero ea?
                      Eum incidunt illo repellendus cumque? Nam omnis officiis eos, ad laudantium magnam, vero dolorem mollitia
                       amet rem temporibus, inventore eaque et molestias enim velit incidunt facilis. Officia blanditiis ea saepe in
                        totam praesentium fugit fugiat inventore rerum expedita ipsum natus dolor fuga quia nisi
                    repudiandae a dignissimos nulla, veniam reprehenderit.</p>
    </section>
    <div class="img2">
        <div class="ptext">
            <span class="border">
                    Image Two
            </span>
        </div>
    </div>
    <section class="section section-2">
        <h2>个人在线</h2>
        <p>Lorem ipsum dolor, sit amet consectetur adipisicing 
            elit. Consequatur vero commodi, incidunt ut a sed.
                Cupiditate eaque inventore, repudiandae nihil magni 
                quo dolores veritatis! Maiores, ab nam? Similique 
                quidem repellat aut sit, assumenda et accusamus vero,
                ab, sequi itaque ut culpa libero possimus alias 
                delectus accusantium est. Explicabo, quibusdam
                commodi. Ab consequatur, accusantium adipisci
                consectetur molestiae tempora beatae modi totam
                    natus corrupti, veniam, officia aliquid architecto
                    aceat libero molestias. Mollitia voluptate quia 
                    accusantium voluptatum doloribus earum placeat ullam
                    illo temporibus consequuntur. Ipsa deserunt 
                    architecto aliquam doloribus eveniet voluptates culpa
                    sequuntur nemo pariatur eos maiores ad ex sequi hic ut
                    animi, impedit eum debitis vel fugit voluptate! Eos quo 
                    voluptas aspernatur in iste maxime consequuntur molestiae
    </section>
    <div class="img3">
        <div class="ptext">
            <span class="border">
                Image Three
            </span>
        </div>
    </div>
    <section class="section section-2">
        <h2>个人在线</h2>
        <p>Lorem ipsum dolor, sit amet consectetur adipisicing 
            elit. Consequatur vero commodi, incidunt ut a sed.
                Cupiditate eaque inventore, repudiandae nihil magni 
                quo dolores veritatis! Maiores, ab nam? Similique 
                quidem repellat aut sit, assumenda et accusamus vero,
    </section>
    <div class="img4">
        <div class="ptext">
            <span class="border">
                Image Four
            </span>
        </div>
    </div>

</body>
</html>