CSS背景附件属性推进

如果定义了背景图像属性,然后使用背景附件指示背景图像的位置被固定到视口或包含块运动中,则简单理解为定义背景图像与滚动轴移动的方式。

价值:

滚动条:默认值,背景图固定在元素上,背景与页面一起移动,也就是背景和内容绑定。
固定:相对于视口的背景图像是固定的,所以页面滚动背景不移动,相当于在体内设置。
本地:背景图是固定在元素的内容中的,
Inhert:继承了,什么也不说。

此属性可应用于任何元素。

1。滚动{背景滚动}
设置背景附件:滚动,背景图与元素本身相对,内容动态背景图也被移动。附在元素上的边框。


局部

注:

对于滚动条,一般背景是滚动的内容,但有一个例外。

对于可以滚动的元素(元素设置为溢出:滚动)。当背景附件设置为滚动时,背景图不会与元素的元素滚动。


二、本地滚动元素背景滚动}
对于可以滚动的元素(设置为溢出的元素:滚动)和设置背景附件:本地,背景滚动的内容。

因为背景图相对于元素本身的内容而定位,所以它开始修复,背景图在元素为滚动条之后随内容滚动。


div {
宽度:200px;
身高:350px;
border: 1px solid红;
背景图像:URL(IMG / img_tree。PNG);
后台重复:不重复;
背景附件:本地;
溢出:滚动;
线高度:1.5;
}



1内容超出滚动条
2内容超出滚动条
3内容超出滚动条
4内容超出滚动条
5内容超出滚动条
6内容超出滚动条
7内容超出滚动条
8内容超出滚动条
9内容超出滚动条
10内容超出滚动条
11内容超出滚动条
12内容超出滚动条
13内容超出滚动条
14内容超出滚动条
15内容超出滚动条
16内容超出滚动条
17内容超出滚动条
18内容超出滚动条
19内容超出滚动条
20内容超出滚动条






三,固定:{背景地图}
背景图像相对于视口是固定的,即使元素有一个滚动条,移动内容的背景图片。

使用固定方式如下:


体{
背景图像:URL(IMG / cartooncat。PNG);
背景位置:左下角;
背景附件:固定;
后台重复:不重复;
身高:1000px;
}



拉下看效果:





或者看看Mozilla的demo。

在这里,我想强调一下我的观点:

设置背景附件:固定在背景图中的任何元素;效果是相同的,相对于视口,因为一个网页只有一个视图,背景和元素没有关系,可能只是说背景图片元素不可见的。

这个视口是什么这里是详细像素和浏览器视口中的一篇文章。

四、多背景图形背景附件
还可以为多个背景地图设置背景附件。

{体
背景图像:URL(img1。png),URL(img2. PNG );
背景附件:滚动,固定;
}


五。资源链接

W3C背景附件

浏览器视口的像素和细节

一桌两个视口