这里给大家分享我在网上总结出来的一些知识 ，希望对大家有所帮助
预览效果如下
CSS-background-attachment
前置知识
首先 background-attachment 要和 background-image
一起使用才有意义 ，表示的是背景图像是否固定或者随着页面的其余部分滚动 。
background-attachment 有四个可选值：
fixed ，scroll ，local ，inherit
。
scroll
是该属性的默认值 ，表示背景图相对于元素固定 ，简单理解就是两者绑定住了 ，所以元素滚动了图片也会跟着滚动 。
local
表示背景图相对于元素内容固定 ，而相对于其他滚动条则会滚动 。举例来说 ，假如元素内部设置了overflow：scroll ，则元素内部会出现滚动条 ，此时滚动元素内部滚动条的时候 ，背景图会随着滚动而滚动 。而如果我们设置 background-attachment：scroll ，则背景图会随着元素内部滚动而固定住 。
fixed
表示背景图相对于视口固定 ，无论怎么滚动 ，元素都岿然不动 ，如果多个元素都设置了fixed ，他们也只会在自己的元素内显示 ，互不影响 。
inherit 只是指定 background-attachment 的设置从父元素继承 。
scroll与local的区别
scroll效果如下
local效果如下
//html
<div class=
"image_1">
<div class=
"word">Bye bye, Lucia</div>
</div>
<div class=
"bg">The best hard are always the bravest</div>
<div class=
"image_2">
<div class=
"word">All children, except one, grow up</div>
</div>
<div class=
"bg">Its better to burn out than to fade away</div>
<div class=
"image_3">
<div class=
"word">Fading is true while flowering is past</div>
</div>
<div class=
"bg">There was no possibility of taking a walk</div>
<div class=
"image_4">
<div class=
"word">All this happened, more or less</div>
</div>
//css
* {
padding: 0;
margin: 0;
}
.image_1 {
background-image: url(./images/1.webp);
background-position: 0 0;
background-attachment: fixed;
background-size: cover;
height: 680px;
width: 100%;
}
.image_2 {
background-image: url(./images/2.jpg);
background-position: 0 0;
background-attachment: fixed;
background-size: cover;
height: 680px;
width: 100%;
}
.image_3 {
background-image: url(./images/3.jpg);
background-position: 0 0;
background-attachment: fixed;
background-size: cover;
height: 680px;
width: 100%;
}
.image_4 {
background-image: url(./images/4.jpeg);
background-position: 0 0;
background-attachment: fixed;
background-size: cover;
height: 680px;
width: 100%;
}
.word {
position: relative;
top: 480px;
font-size: 55px;
color: white;
text-align: center;
font-weight: bolder;
}
.bg {
text-align: center;
font-size: 46px;
font-weight: bolder;
height: 220px;
line-height: 220px;
background-color: rgb(131, 134, 204);
color: white;
}
预览效果如下
CSS-translateZ
前置知识
transform-style: preserve-3d表示让子元素保留3D转换 。
好吧 ，直接上代码～
//html
<div class=
"wrapper">
<div class=
"demo"></div>
</div>
//css
body {
perspective: 800px;
perspective-origin: 250px 300px;
}
.wrapper {
position: relative;
left: 200px;
top: 100px;
height: 480px;
width: 60%;
background-color: #0ff;
transform: rotateY(45deg);
/* transform-style: preserve-3d; */
}
.demo {
height: 100%;
background-image: url(./images/3.jpg);
background-size: cover;
transform: translateZ(100px);
}
不加preserve-3d效果
加上preserve-3d效果
看出差异了吧 ，有层次了 ，立体感高高的～
需要注意的是 transform-style: preserve-3d 这个属性加在谁身上 ，谁的子元素才会有3D效果 ，比如上面的代码中把属性加在 body 上是没有效果的 。
perspective 定义3D元素距视图的距离 。
简单来理解 ，如果我设置了 perspective：500px ，则表示我在离屏幕500px远的地方观看这个元素 。注意一下官方讲解的 当为元素定义 perspective 属性时 ，其子元素会获得透视效果 ，所以我们需要将这个属性设置在父元素上 。
加上perspective效果
不加perspective效果
视距 = 距离产生美～
translateZ: 向Z轴平移 。
我们现在和屏幕的距离就是Z轴 ，所以Z轴是朝向我们的 ，如果translateZ里面的值越大 ，说明屏幕离我们越近 ，translateZ里面的值越小 ，屏幕离我们就越远 。
perspective和translateZ的化学反应
这两者有什么区别呢 ，简单的说就是translateZ是移动图片 ，perspective是移动人和屏幕的距离 。但是当这两者结合起来的时候神奇的事情就会发生～
//html
<div class=
"wrapper">
<div class=
"demo"></div>
</div>
//css
.wrapper {
position: relative;
left: 200px;
top: 100px;
height: 480px;
width: 60%;
perspective: 800px;
}
.demo {
height: 100%;
background-image: url(./images/3.jpg);
background-size: cover;
transform: translateZ(-100px);
}
perspective: 800px的情况
perspective: 100px的情况
我们把视距调小 ，图片竟然变小了 ，按照道理视距越小说明屏幕离我越近 ，图片应该变大才对 。其实 ，这里我们看到的图片 ，并不是图片本体 ，而是图片在屏幕上的投影 。
同理 ，我们去理解translateZ的值变大 ，图片变大也比较容易了 。
translateZ(-100px)的情况
translateZ(-20px)的情况
那么只要我们将不同的元素的translateZ设置成不同的负值 ，那么越大值的元素 ，它的投影就会越大 ，滚动速度就会越快 ，当然这些元素的滚动速度也只有translateZ（0）的几分之一～
//html
<div class=
"g-container">
<div class=
"section-one">translateZ(-1)</div>
<div class=
"section-two">translateZ(-2)</div>
<div class=
"section-three">translateZ(-3)</div>
</div>
//css
html {
height: 100%;
overflow: hidden;
}
body {
margin: 0;
padding: 0;
height: 100%;
overflow-y: scroll;
overflow-x: hidden;
perspective: 2px;
}
.g-container {
position: relative;
transform-style: preserve-3d;
transform-origin: center center;
height: 150%;
}
.g-container div {
font-size: 5vw;
position: absolute;
top: 20%;
}
.section-one {
left: 0%;
background: rgba(10, 10, 10, 0.2);
transform: translateZ(-1px);
}
.section-two {
left: 40%;
background: rgba(30, 130, 30, 0.2);
transform: translateZ(-2px);
}
.section-three {
left: 90%;
background: rgba(200, 100, 130, 0.2);
transform: translateZ(-3px);
}
预览效果如下
本文转载于:
https://juejin.cn/post/7200653122637103164
如果对您有所帮助 ，欢迎您点个关注 ，我会定时更新技术文档 ，大家一起讨论学习 ，一起进步 。
声明：本站所有文章 ，如无特殊说明或标注 ，均为本站原创发布 。任何个人或组织 ，在未征得本站同意时 ，禁止复制 、盗用 、采集 、发布本站内容到任何网站 、书籍等各类媒体平台 。如若本站内容侵犯了原著者的合法权益 ，可联系我们进行处理 。
