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 adipisicingelit. Consequatur vero commodi, incidunt ut a sed.Cupiditate eaque inventore, repudiandae nihil magniquo dolores veritatis! Maiores, ab nam? Similiquequidem repellat aut sit, assumenda et accusamus vero,ab, sequi itaque ut culpa libero possimus aliasdelectus accusantium est. Explicabo, quibusdamcommodi. Ab consequatur, accusantium adipisciconsectetur molestiae tempora beatae modi totamnatus corrupti, veniam, officia aliquid architectoaceat libero molestias. Mollitia voluptate quiaaccusantium voluptatum doloribus earum placeat ullamillo temporibus consequuntur. Ipsa deseruntarchitecto aliquam doloribus eveniet voluptates culpasequuntur nemo pariatur eos maiores ad ex sequi hic utanimi, impedit eum debitis vel fugit voluptate! Eos quovoluptas aspernatur in iste maxime consequuntur molestiaefugiat doloribus veritatis ipsum ducimus nobis voluptatem atque animi,est rerum numquam sapiente error distinctio nostrum dolor? Illo reprehenderit doloribus vero repellatincidunt 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 mollitiaamet rem temporibus, inventore eaque et molestias enim velit incidunt facilis. Officia blanditiis ea saepe intotam praesentium fugit fugiat inventore rerum expedita ipsum natus dolor fuga quia nisirepudiandae 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 adipisicingelit. Consequatur vero commodi, incidunt ut a sed.Cupiditate eaque inventore, repudiandae nihil magniquo dolores veritatis! Maiores, ab nam? Similiquequidem repellat aut sit, assumenda et accusamus vero,ab, sequi itaque ut culpa libero possimus aliasdelectus accusantium est. Explicabo, quibusdamcommodi. Ab consequatur, accusantium adipisciconsectetur molestiae tempora beatae modi totamnatus corrupti, veniam, officia aliquid architectoaceat libero molestias. Mollitia voluptate quiaaccusantium voluptatum doloribus earum placeat ullamillo temporibus consequuntur. Ipsa deseruntarchitecto aliquam doloribus eveniet voluptates culpasequuntur nemo pariatur eos maiores ad ex sequi hic utanimi, impedit eum debitis vel fugit voluptate! Eos quovoluptas 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 adipisicingelit. Consequatur vero commodi, incidunt ut a sed.Cupiditate eaque inventore, repudiandae nihil magniquo dolores veritatis! Maiores, ab nam? Similiquequidem 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 adipisicingelit. Consequatur vero commodi, incidunt ut a sed.Cupiditate eaque inventore, repudiandae nihil magniquo dolores veritatis! Maiores, ab nam? Similiquequidem repellat aut sit, assumenda et accusamus vero,ab, sequi itaque ut culpa libero possimus aliasdelectus accusantium est. Explicabo, quibusdamcommodi. Ab consequatur, accusantium adipisciconsectetur molestiae tempora beatae modi totamnatus corrupti, veniam, officia aliquid architectoaceat libero molestias. Mollitia voluptate quiaaccusantium voluptatum doloribus earum placeat ullamillo temporibus consequuntur. Ipsa deseruntarchitecto aliquam doloribus eveniet voluptates culpasequuntur nemo pariatur eos maiores ad ex sequi hic utanimi, impedit eum debitis vel fugit voluptate! Eos quovoluptas aspernatur in iste maxime consequuntur molestiaefugiat doloribus veritatis ipsum ducimus nobis voluptatem atque animi,est rerum numquam sapiente error distinctio nostrum dolor? Illo reprehenderit doloribus vero repellatincidunt 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 mollitiaamet rem temporibus, inventore eaque et molestias enim velit incidunt facilis. Officia blanditiis ea saepe intotam praesentium fugit fugiat inventore rerum expedita ipsum natus dolor fuga quia nisirepudiandae 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 adipisicingelit. Consequatur vero commodi, incidunt ut a sed.Cupiditate eaque inventore, repudiandae nihil magniquo dolores veritatis! Maiores, ab nam? Similiquequidem repellat aut sit, assumenda et accusamus vero,ab, sequi itaque ut culpa libero possimus aliasdelectus accusantium est. Explicabo, quibusdamcommodi. Ab consequatur, accusantium adipisciconsectetur molestiae tempora beatae modi totamnatus corrupti, veniam, officia aliquid architectoaceat libero molestias. Mollitia voluptate quiaaccusantium voluptatum doloribus earum placeat ullamillo temporibus consequuntur. Ipsa deseruntarchitecto aliquam doloribus eveniet voluptates culpasequuntur nemo pariatur eos maiores ad ex sequi hic utanimi, impedit eum debitis vel fugit voluptate! Eos quovoluptas 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 adipisicingelit. Consequatur vero commodi, incidunt ut a sed.Cupiditate eaque inventore, repudiandae nihil magniquo dolores veritatis! Maiores, ab nam? Similiquequidem repellat aut sit, assumenda et accusamus vero,</section><div class=\"img4\"><div class=\"ptext\"><span class=\"border\">Image Four</span></div></div></body></html>