个人练习，在csdn记录
该练习记录一个有趣的样式属性，视口背景设置background-attachment，把背景图片的位置固定在视口，当滑动滚轮时，背景图片不会移动
爱奇艺就有这个效果，随着浏览器滚轮向下移动，图片都没有移动，并且被后面的元素覆盖
爱奇艺
随便找图片进行试验一下，先设置两个div，div1和div2，设置好宽高后，div1设置背景图片，并设置background-attachment，div2设置背景颜色为白色
效果视频：
视口固定1
代码内容：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="div01"></div>
<div class="div02"></div>
<style>
* {
margin: 0;
padding: 0;
}
.div01 {
height: 720px;
width: 100%;
background-position: center;
background-size: cover;
background-attachment: fixed;
background-image: url(./imgs/视差01.jpg);
}
.div02 {
width: 100%;
height: 2000px;
background-color: red;
}
</style>
</body>
</html>如果把div2放到div1前面，效果也挺不错的
效果视频：
视口固定2
去掉div2，在div1设置内容，内容会随则滚轮进行移动，但是背景图片并没有移动
效果视频：
视口固定3
代码内容：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="div01">
《弹歌》和《击壤歌》被认为是流传于上古时代的歌谣，但是此前并无文字记录。到了东汉和西晋，据上古时代已经有千年以上之久。赵晔和皇甫谧怎么会忽然知道这两首歌谣？没有事实依据，说服力不强，这两首诗很有可能是后人的伪作，这样的事在历史上是常有发生的。个人姑且把中国最早的诗歌总集《诗经》作为中国诗歌的鼻祖。形成于先秦时期的《诗经》，由于当时的人、事、物，距今已年代久远，有些字很生僻，遣词造句的方式亦与现代有很大差别，因此，这个时期的诗歌虽然看上去抱朴守拙，但也往往晦涩难懂，流传度不如唐诗宋词那样家喻户晓。不过《诗经》中也有部分作品现在看起来也是比较容易理解的。
此次挑选出82首，但由于自身的知识面所限，所选主要是依据自己的阅览范围及喜爱程序，考虑到篇幅限制及不同时期跨度，单个诗人入选的篇数有所控制，长篇的选的少，短篇为主。而某些太过于耳熟能详的作品，许是审美疲劳，有时反而刻意没有选入。因此所选具有浓厚的个人主观局限，自古有文无第一、武无第二之说，每个人的喜好也是千差万别，不敢妄论所选即是合理的。又由于个人文学修养很有限，远不具备对大师们的作品评头论足的水平，因此，每首诗词仅作一些简单介绍或戏说性的评述。欢迎诗歌高手们品评。
《弹歌》和《击壤歌》被认为是流传于上古时代的歌谣，但是此前并无文字记录。到了东汉和西晋，据上古时代已经有千年以上之久。赵晔和皇甫谧怎么会忽然知道这两首歌谣？没有事实依据，说服力不强，这两首诗很有可能是后人的伪作，这样的事在历史上是常有发生的。个人姑且把中国最早的诗歌总集《诗经》作为中国诗歌的鼻祖。形成于先秦时期的《诗经》，由于当时的人、事、物，距今已年代久远，有些字很生僻，遣词造句的方式亦与现代有很大差别，因此，这个时期的诗歌虽然看上去抱朴守拙，但也往往晦涩难懂，流传度不如唐诗宋词那样家喻户晓。不过《诗经》中也有部分作品现在看起来也是比较容易理解的。
此次挑选出82首，但由于自身的知识面所限，所选主要是依据自己的阅览范围及喜爱程序，考虑到篇幅限制及不同时期跨度，单个诗人入选的篇数有所控制，长篇的选的少，短篇为主。而某些太过于耳熟能详的作品，许是审美疲劳，有时反而刻意没有选入。因此所选具有浓厚的个人主观局限，自古有文无第一、武无第二之说，每个人的喜好也是千差万别，不敢妄论所选即是合理的。又由于个人文学修养很有限，远不具备对大师们的作品评头论足的水平，因此，每首诗词仅作一些简单介绍或戏说性的评述。欢迎诗歌高手们品评。《弹歌》和《击壤歌》被认为是流传于上古时代的歌谣，但是此前并无文字记录。到了东汉和西晋，据上古时代已经有千年以上之久。赵晔和皇甫谧怎么会忽然知道这两首歌谣？没有事实依据，说服力不强，这两首诗很有可能是后人的伪作，这样的事在历史上是常有发生的。个人姑且把中国最早的诗歌总集《诗经》作为中国诗歌的鼻祖。形成于先秦时期的《诗经》，由于当时的人、事、物，距今已年代久远，有些字很生僻，遣词造句的方式亦与现代有很大差别，因此，这个时期的诗歌虽然看上去抱朴守拙，但也往往晦涩难懂，流传度不如唐诗宋词那样家喻户晓。不过《诗经》中也有部分作品现在看起来也是比较容易理解的。
此次挑选出82首，但由于自身的知识面所限，所选主要是依据自己的阅览范围及喜爱程序，考虑到篇幅限制及不同时期跨度，单个诗人入选的篇数有所控制，长篇的选的少，短篇为主。而某些太过于耳熟能详的作品，许是审美疲劳，有时反而刻意没有选入。因此所选具有浓厚的个人主观局限，自古有文无第一、武无第二之说，每个人的喜好也是千差万别，不敢妄论所选即是合理的。又由于个人文学修养很有限，远不具备对大师们的作品评头论足的水平，因此，每首诗词仅作一些简单介绍或戏说性的评述。欢迎诗歌高手们品评。《弹歌》和《击壤歌》被认为是流传于上古时代的歌谣，但是此前并无文字记录。到了东汉和西晋，据上古时代已经有千年以上之久。赵晔和皇甫谧怎么会忽然知道这两首歌谣？没有事实依据，说服力不强，这两首诗很有可能是后人的伪作，这样的事在历史上是常有发生的。个人姑且把中国最早的诗歌总集《诗经》作为中国诗歌的鼻祖。形成于先秦时期的《诗经》，由于当时的人、事、物，距今已年代久远，有些字很生僻，遣词造句的方式亦与现代有很大差别，因此，这个时期的诗歌虽然看上去抱朴守拙，但也往往晦涩难懂，流传度不如唐诗宋词那样家喻户晓。不过《诗经》中也有部分作品现在看起来也是比较容易理解的。
此次挑选出82首，但由于自身的知识面所限，所选主要是依据自己的阅览范围及喜爱程序，考虑到篇幅限制及不同时期跨度，单个诗人入选的篇数有所控制，长篇的选的少，短篇为主。而某些太过于耳熟能详的作品，许是审美疲劳，有时反而刻意没有选入。因此所选具有浓厚的个人主观局限，自古有文无第一、武无第二之说，每个人的喜好也是千差万别，不敢妄论所选即是合理的。又由于个人文学修养很有限，远不具备对大师们的作品评头论足的水平，因此，每首诗词仅作一些简单介绍或戏说性的评述。欢迎诗歌高手们品评。
</div>
<style>
* {
margin: 0;
padding: 0;
}
.div01 {
height: 2000px;
width: 100%;
background-position: center;
background-size: cover;
background-attachment: fixed;
background-image: url(./imgs/视差01.jpg);
font-size: 30px;
color: red;
}
</style>
</body>
</html>再设置两个与div1一模一样的div2，div3，但是背景图片不一样，三个都设置了属性background-attachment，效果非常不错
效果视频：
视口固定4
代码内容：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="div01"></div>
<div class="div02"></div>
<div class="div03"></div>
<style>
* {
margin: 0;
padding: 0;
}
div {
height: 720px;
width: 1500px;
background-position: center;
background-size: cover;
background-attachment: fixed;
}
.div01 {
background-image: url(./imgs/视差01.jpg);
}
.div02 {
background-image: url(./imgs/视差02.jpg);
}
.div03 {
background-image: url(./imgs/视差03.jpg);
}
</style>
</body>
</html>
989
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
