什么是background-attachment

background-attachment的作用是设置背景图片是随滚动轴如何滚动的css属性

background-attachment有四个可选值：fixed，scroll，local，inherit（就是单纯地继承父元素的属性）

其中scroll和local属性的作用相类似，当设置background-position的时候，他们的位置是相对于元素的边框的，因此当我们滚动浏览器的滚动条的时候，它会跟随着元素滚动条的滚动而滚动，并和元素一起因滚动而无法在视图中被浏览者看见。

但是假如这个元素内部是具有滚动条的也就是设置了overflow：scroll，那么background-attachment设置了scroll的话，背景图片不会随着内部滚动条的滚动而滚动，但是假如设置了local，那么内容就会随着滚动条的滚动而滚动。

使用scroll的内部带有滚动条的元素内的背景图片不会因为滚动条滚动而改变位置：

scroll

使用local的内部带有滚动条的元素内的背景图片则会因为滚动条滚动而改变位置

local

这是为什么呢？这是因为准确来讲，scroll相对于元素固定，而local是相对于元素内容固定。也就是说，在存在内部滚动条的情况下，scroll就相当于fixed，而local就相当于scroll。

上面就是scroll和local的区别

那么接下来讲一下fixed与scroll的区别，fixed设置后，与scroll的背景图片位置相对于元素不同，fixed的背景图片位置是相对于页面可视区域的左上角的，元素的大小是背景图片能够显示的范围，当滚动过了这个范围，背景图片也将无法看见。fixed不会随着滚动条的滚动而滚动，它只会固定在页面中的某一个位置。这就是fixed与scroll的区别。

转载于:https://www.cnblogs.com/runhua/p/9566295.html

什么是background-attachment相关推荐

css的background
背景属性--background是css中的核心属性.你应该对它有充分的了解.这篇文章详细讨论了background的所有相关属性,甚至包括background-p_w_upload,还为我们介绍了它 ...
CSS3详解：background
CSS3对于background做了一些修改,最明显的一个就是采用设置多背景,不但添加了4个新属性,并且还对目前的属性进行了调整增强. 1.多个背景图片在css3里面,你可以再一个标签元素里应用多个 ...
CSS3之background的调整和增加的属性
对于background做了一些修改,最明显的一个就是采用设置多背景,不但添加了4个新属性,并且还对目前的属性进行了调整增强. 1.多个背景图片在css3里面,你可以再一个标签元素里应用多个背景图片 ...
CSS中的background的详细属性
本文转自:http://blog.sina.com.cn/s/blog_969555e3010135s6.html css2中有五个与背景相关的属性.它们是: background-color:完全填 ...
Tailwind Background
背景滚动(background attachment) CSS提供的background-attachment属性用于设置背景图像的固定方式,比如是否随着页面滚动.简单来说,background-at ...
css 前端设计师必知的background属性（有CSS3内容）
背景属性--background是css中的核心属性.你应该对它有充分的了解.这篇文章详细讨论了background的所有相关属性,甚至包括background-attachment,还为我们介绍了它 ...
前端设计师必知的background属性（有CSS3内容）
转自: http://www.cnblogs.com/biko-zc/archive/2009/09/09/1563545.html 背景属性--background是css中的核心属性.你应该对它有 ...
【CSS3教程】CSS3基础常用技巧实例集合
为什么80%的码农都做不了架构师?>>> CSS3常用技巧 CSS3下条纹&方格斜纹背景的实现一.效果抢先:CSS3下的条纹背景demo 这些美丽的纹饰全部都是由CS ...
CSS3中背景的四个新的属性
本文对CSS3中背景的四个新的属性进行了详细介绍. 多重背景图片 Css3中,对一个元素可以使用一张以上的背景图片.除了使用逗号将图片分开以外,其代码与css2相同.第一个声明的图片定位在元素的顶部, ...
JavaScript技巧
JavaScript技巧 1. οncοntextmenu="window.event.returnValue=false" 将彻底屏蔽鼠标右键 < table bord ...

什么是background-attachment

background-attachment的作用是设置背景图片是随滚动轴如何滚动的css属性

什么是background-attachment相关推荐

最新文章

热门文章