前端开发 大前端 W3Cbest

一个专注 WEB 开发的技术博客

0%

background-attachment 背景图片固定文字滚动

关于background-attachment 也不算是一个比较生僻的属性,基本上在做背景图片固定特别是全屏页面时用时就会用到。

概述节

如果指定了 background-image ,那么 background-attachment 决定背景是在视口中固定的还是随包含它的区块滚动的。

语法

background-attachment: scroll;
background-attachment: fixed;
background-attachment: local;
background-attachment: inherit;

取值节

fixed

此关键字表示背景相对于视口固定。即使一个元素拥有滚动机制,背景也不会随着元素的内容滚动。

local

此关键字表示背景相对于元素的内容固定。如果一个元素拥有滚动机制,背景将会随着元素的内容滚动,且背景的绘制区域和定位区域是相对于可滚动的区域而不是包含他们的边框。

scroll

此关键字表示背景相对于元素本身固定, 而不是随着它的内容滚动(对元素边框是有效的)。

注意: fixed是相对视口固定,而scroll是相对元素本身固定,它和 position 定位的 absolute 和 fixed有点像。

 

简单的例子

section {
background-image: url(“https://picjumbo.com/wp-content/uploads/christmas-backgrounds-2210x1473.jpg");
background-attachment: fixed;
}

子曰:“学而时习之,不亦说乎?有朋自远方来,不亦乐乎?人不知而不愠,不亦君子乎?”

有子曰:“其为人也孝弟,而好犯上者,鲜矣;不好犯上而好作乱者,未之有也。君子务本,本立而道生。孝弟也者,其为仁之本与!”

子曰:“巧言令色,鲜矣仁!”

曾子曰:“吾日三省吾身:为人谋而不忠乎?与朋友交而不信乎?传不习乎?”

子曰:“道千乘之国,敬事而信,节用而爱人,使民以时。”

子曰:“弟子入则孝,出则弟,谨而信,泛爱众,而亲仁,行有余力,则以学文。”

 

See the Pen 单背景支持 by xianzhiding (@xianzhiding) on CodePen.

多背景图支持

此属性支持多张背景图片。你可以用逗号分隔来为每一张背景图片指定不同的。每一张背景图片顺序对应相应的attachment 类型。

section{
background-image: url(“https://picjumbo.com/wp-content/uploads/gingerbread-decorating-1080x1620.jpg"), url(“https://picjumbo.com/wp-content/uploads/woman-working-in-modern-office-space-2210x3315.jpg");
background-attachment: fixed, scroll;
background-repeat: no-repeat, repeat-y;
}

子曰:“学而时习之,不亦说乎?有朋自远方来,不亦乐乎?人不知而不愠,不亦君子乎?”

有子曰:“其为人也孝弟,而好犯上者,鲜矣;不好犯上而好作乱者,未之有也。君子务本,本立而道生。孝弟也者,其为仁之本与!”

子曰:“巧言令色,鲜矣仁!”

曾子曰:“吾日三省吾身:为人谋而不忠乎?与朋友交而不信乎?传不习乎?”

子曰:“道千乘之国,敬事而信,节用而爱人,使民以时。”

子曰:“弟子入则孝,出则弟,谨而信,泛爱众,而亲仁,行有余力,则以学文。”

See the Pen 多背景图支持节 by xianzhiding (@xianzhiding) on CodePen.

使用 fixed 实现多模块背景固定效果

fixed 此关键字表示背景相对于视口固定。即使一个元素拥有滚动机制,背景也不会随着元素的内容滚动。也就是说,背景图从一开始就已经被固定死在初始所在的位置。  

See the Pen 视差效果 by w3cbest.com (@w3cbest)on CodePen.

坚持技术创作分享,您的支持将鼓励我继续创作!