首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

为什么将background-attachment设置为固定会改变背景的宽度行为?

将background-attachment设置为固定会改变背景的宽度行为是因为固定背景会创建一个视差效果,使背景相对于视口固定而不是相对于元素本身固定。这意味着当元素滚动时,背景将保持固定,而元素的内容将滚动。这种行为会导致背景的宽度与元素的宽度不再一致。

具体来说,当将background-attachment设置为固定时,背景图像将相对于视口固定,而元素的内容将滚动。这意味着当元素的内容超出元素的宽度时,元素会出现水平滚动条,而背景图像将保持固定不动。这种行为会导致背景的宽度与元素的宽度不匹配,从而改变了背景的宽度行为。

这种背景固定的效果通常用于创建视差滚动效果,可以为网页增加动态和交互性。例如,在网页滚动时,可以通过固定背景来创建一种立体感,使得背景与前景元素产生错位运动的效果。

在腾讯云的产品中,与背景固定相关的产品和服务可能包括前端开发工具、网页设计工具、网页特效库等。具体推荐的产品和产品介绍链接地址需要根据实际情况和需求来确定。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

css入门(5)

4、background-attachment 在CSS中,使用背景附件background-attachment属性可以设置背景图像是随对象滚动还是固定不动。...image.png 如上图,使用background-attachment属性设置背景图像固定不动,然后你拖动浏览器滚动条时候惊奇发现,图像在固定在浏览器某个位置,而不随滚动条滚动而变化!...第三个div元素background-repeat属性值“repeat-y”,因此背景图片会在垂直方向(y轴)平铺 大家可能对hr元素属性设置很奇怪,为什么设置hrborder-color属性值...red,hr颜色就会改变,而不是设置hrcolor属性red或者background-colorred呢?...这跟hr本身特点有关,在CSS进阶“hrCSS设置”这一节我们详细讲解到。 注意:设置背景图片元素宽或高大于背景图片本身宽或高,才会有平铺效果。

98830

CSS背景缩写、简写详细

background-clip      背景绘制区域  /* 底部详细说明 */ background-attachment背景图像是否固定或者随着页面的其余部分滚动 background-image...如果只设置一个值,则第二个值会被设置 “auto”,和图片尺寸定义类似。 background-size:90% 80% 这表示以父元素百分比来设置背景图片宽度和高度。...第一个值设置宽度,第二个值设置高度。如果只设置一个值,则第二个值会被设置 “auto”。 background-size:cover 这表示把背景图片扩展至足够大,使图片完全覆盖背景区域。...经常有人问能不能给背景颜色设置透明度,我也有过同样想法 在这里普及一下,截止目前为止(2020-9-2),还没有准确属性值可以改变背景图片透明度,但我们有其它方法可以实现近似效果 像这种...背景色加背景图片是不可行,jpg图片覆盖在背景颜色上,只有露出部分才会显示底色,起不到遮罩效果。

2.3K10
  • CSS奇淫技巧

    如果这个盒容器width和height设置0,并为每条边框设置一个较粗width值和彼此不同颜色,最终会得到四个被拼接到一起三角形,它们分别指向不同方向: <...: 一个元素width和heigth都设置0 设置较粗边框 将其中三个边框颜色设置透明 还可以为相邻边框设置不同边框宽度改变三角形角度。...最先声明阴影在最上面。 偏移和模糊半径都设置0,才会形成边缘清晰元素四周边框。 各个阴影扩展半径设置不同长度。...background-attachment属性用于设置背景图片决定背景是在视口中固定还是随包含它区块滚动。 而fixed属性值就是表示背景图片不随容器一起滚动,而是相对于视口固定。...这样的话在我们向下滑动页面时,容器及其内容是向上滚动,但其背景图片却是固定,造成一种视差滚动效果。

    2.7K120

    CSS背景1-概述

    1、属性说明 1.1、background-image background-image 属性元素设置背景图像。 元素背景占据了元素全部尺寸,包括内边距和边框,但不包括外边距。...如果只设置一个值,则第二个值会被设置 "auto"。 percentage 以父元素百分比来设置背景图像宽度和高度。第一个值设置宽度,第二个值设置高度。...如果只设置一个值,则第二个值会被设置 "auto"。 cover 把背景图像扩展至足够大,以使背景图像完全覆盖背景区域。背景图像某些部分也许无法显示在背景定位区域中。...100% 100% 图片宽度和高度比例会被改变,填满盒子。 cover 图片宽度和高度比例不变,填满盒子,超出部分会被裁剪。...1.7 background-attachment 设置背景图像是否固定或者随着页面的其余部分滚动。 值 描述 scroll 默认值。背景图像随着页面其余部分滚动而移动。

    59320

    【经验分享】图片自适应窗口大小css;CSS实现背景图片全屏铺满自适应方式

    通过 CSS 样式表,我们可以轻松地控制网页背景效果。在这篇博客中,我介绍如何使用 CSS 来设置网页背景,让你网站更加吸引人。...这可以通过简单 CSS 属性来实现: margin: 0px; background-color: #ffffff; /* 背景颜色设置白色 */ 在上面的代码中,margin: 0px; 用来清除默认页面边距...background-color 属性设置了网页背景颜色白色。 设置背景图片 除了纯色背景,我们还可以使用背景图片来增强网页视觉效果。...background-size: 100% 100%; background-attachment: fixed; background-size: 100% 100%; 表示背景图片宽度和高度都设置...这样可以确保背景图片不会失真,并且完全覆盖整个页面。 background-attachment: fixed; 则表示背景图片固定不动,即当用户滚动网页时,背景图片仍然保持在固定位置不变。

    91300

    深入常用CSS声明(一) —— Background

    padding-box 背景图片和容器padding区域原点对齐 content-box 背景图片和容器内容区域原点对齐 在background-attachment:fixed下没有作用,...-- 下面省略若干和,作为撑开容器使用 --> 同样通过设置一个select来改变background-attachment值,可以观察到图片表现状态: ?...当设置scroll时候,图片固定在容器下方,而设置local时候,图片固定在内容下方,需要滑动一定距离才能看得见图片。...如果设置两个值情况下, 第一个表示水平方向定位,第二个表示竖直方向定位: 两个都是固定值,这点按照字面意义理解就好 一个固定,一个具体数值,数值如果具体值:代表具体定位,如果百分比,则计算...一个固定值: contain: 最大限度填充背景区域,但是不能被裁剪,因此例子中图片适应高度放大 cover: 填满背景容器区域,图片可以被裁剪,因此例子中图片适应宽度放大 auto: 如果图片有自身尺寸

    1.8K50

    寒假提升 | Day6 CSS 第四部分

    默写出display常见值,并且说出对应特性,并且写出测试案例 block:让元素显示块级元素;可以让元素独占一行,可以设置宽度和高度,高度默认由内容决定 inline:让元素显示行内级元素 ;...,a设置0 rgbaa设置是alpha值, 可以设置透明度, 不影响子元素 opacity设置透明度, 设置0 设置整个元素透明度, 影响所有的子元素 五.京东案例 七....背景设置 3.1. background-image background-image用于设置元素背景图片 盖在(不是覆盖) background-color上面 如果设置了多张图片 设置第一张图片显示在最上面...:top、center、bottom 如果只设置了1个方向,另一个方向默认是center 3.5. background-attachment background-attachment决定背景图像位置是在视口内固定...可以设置以下3个值 scroll:此关键属性值表示背景相对于元素本身固定, 而不是随着它内容滚动 local:此关键属性值表示背景相对于元素内容固定

    1.3K20

    CSS 背景(background)

    默认值:(0% 0%)。 如果只指定了一个值,该值将用于横坐标。纵坐标默认为50%。第二个值将用于纵坐标。 注意: position 后面是x坐标和y坐标。...语法: background-attachment : scroll | fixed 参数: scroll :  背景图像是随对象内容滚动 fixed :  背景图像固定 说明: 设置或检索背景图像是随对象内容滚动还是固定...其参数设置如下: a) 可以设置长度单位(px)或百分比(设置百分比时,相对于父盒子宽高) b) 设置cover时,自动调整缩放比例(等比例拉伸),保证图片始终填充满背景区域(直到宽和高都填满,可能溢出...我们平时用cover 最多 c) 设置contain自动调整缩放比例(等比例拉伸),保证图片始终完整显示在背景区域(宽或者高有一方填满就不再继续拉伸),可能有空白区域。...一个元素可以设置多重背景图像。 每组属性间使用逗号分隔。 如果设置多重背景图之间存在着交集(即存在着重叠关系),前面的背景覆盖在后面的背景图之上。

    2.1K20

    CSS显示模式

    CSS显示模式 块元素 独占一行 高度,宽度,外边距以及内边距都能控制 宽度默认是100% 是一个容器及盒子,里面可以放行内或者块级元素 行内元素 一行可以显示多个 宽高无法设置 默认高度是本身内容宽度...; 转化为行内块元素:display:inline-biock; 注意:单行文字垂直居中,让行高等于盒子高度 CSS背景 背景图片:background-image:url(地址) 注意:默认铺满盒子...y 如果只写一个参数那就是x值,y默认为垂直居中 背景位置-混合单位 background-position: 20px center 同样第一个对应x值,第二个对应y背景固定background-attachment...来实现 参数 作用 scroll 背景随对象内容滚动 fixed 背景图像固定 注意:默认值是scroll 背景属性复合写法: background:背景颜色 背景图片地址 背景平铺 背景图像滚动...position 分别是x,y坐标 background-attachment 背景固定 scroll/fixed 背景半透明 实现半透明 rgba(rgba代码)a透明度

    81400

    css基础样式2

    ] 5.background-attachment 设置背景图像是否固定,是否随着页面其他部分而滚动。...参数 fixed 此关键字表示背景相对于视口固定。即使一个元素拥有滚动机制,背景也不会随着元素内容滚动。 local 此关键字表示背景相对于元素内容固定。...scroll 此关键字表示背景相对于元素本身固定, 而不是随着它内容滚动(对元素边框是有效)。...,不能裁剪背景图片一分一毫 ? 100px,100px 设置背景图片宽高数值 也可以只写一个数值200px,表示长宽最大200px。也可以设置50%,高度容器50% ?...(2)设置空白字符fontsize0,就消除了空白字符占用位置。 再重新设置子元素font-size ? 4.两个行内元素容易产生对不齐状况。 ?

    1.4K40

    css基础系列

    设置元素背景图片显示方式: background-attachment: scroll | fixed scroll: 默认值,背景图片随滚动条滚动 fixed:当页面的其余部分滚动时,背景图片不会移动...image.png css背景与列表 css背景样式 background-color:设置元素背景颜色 background-image:把图像设置背景 background-position...:设置背景图像起始位置 background-attachment:背景图像是否固定或者随着页面的其余部分滚动 background-repeat:设置背景图像是否重复以及如何重复 background...:背景属性设置 css列表样式 list-style-type:设置列表项标志类型 list-style-image:图像设置列表项标志 list-style-position:设置列表中列表项标志位置...设置元素背景图片显示方式 background-attachment: scroll | fixed scroll:随着滚动条滚动,fixed:背景图片不会移动 背景图片定位 background-position

    1.8K40

    CSS中background属性与margin和padding内外边距关系总结

    ; 背景图水平居左,垂直居中 1.5cm bottom 5em 50% 0px 0px,center background-attachment:定义背景图像显示(固定)方式。...background-attachment: scroll; 背景相对于元素本身固定, 而不是随着它内容滚动(对元素边框是有效)。...background-attachment: fixed; 背景相对于视口固定。即使一个元素拥有滚动机制,背景也不会随着元素内容滚动。...background-attachment: local; 此关键字表示背景相对于元素内容固定。...,不够地方空白显示 / 一个值: 这个值指定图片宽度,图片高度默认为auto / background-size: 50%; 相对背景区【由 background-origin 设置百分比 background-size

    7.1K00

    【CSS】背景样式:background

    3 background-attachment 规定背景图像是否固定或者随着页面的其余部分滚动。 1 background-image 规定要使用背景图像。...背景颜色透明。 inherit 规定应该从父元素继承 background-color 属性设置。 background-image 设置背景图片。...div{ background-size:80px 60px; } background-size 值 作用 length 设置背景图像高度和宽度。 第一个值设置宽度,第二个值设置高度。...如果只设置一个值,则第二个值会被设置 "auto"。 percentage 以父元素百分比来设置背景图像宽度和高度。 第一个值设置宽度,第二个值设置高度。...如果只设置一个值,则第二个值会被设置 "auto"。 cover 把背景图像扩展至足够大,以使背景图像完全覆盖背景区域。 背景图像某些部分也许无法显示在背景定位区域中。

    1.6K30

    9.背景样式-CSS基础

    background-position 定义背景图片位置。 background-attachment 几乎用不上。定义背景图片固定。...,因为没有设置宽度和高度都为0,所以背景图片不会显示,所以在使用background-image属性前一定要看看元素是否设置了宽高。...背景图片重复(background-repeat)示例1.png (2)元素大小必须大于图片大小 元素宽度和高度必须大于背景图片宽度和高度,才会有重复效果。...六、背景图片固定background-attachment) 在CSS中,使用background-attachment属性来定义背景图片是随元素一起滚动还是固定不动。...1.背景图片固定使用 (1)语法格式 background-attachment:取值; ① background-attachment属性值 属性值 说明 scroll 随元素一起滚动(默认值) fixed

    1K30

    全栈之前端 | 9.CSS3基础知识之图像元素样式学习

    通过本章学习如下图像相关属性,您可以改变图像、媒体样式等。 width/height 属性: 调整图像宽高大小(前面已介绍,此处不在累述)。...background-image 属性 - 设置元素单个或多个背景图像 描述: 在前面学习backgroundCSS属性中,简单提及了一下其设置背景图片相关样式参数,此处继续验证其属性参数展示效果...属性 - 设置背景图像初始位置 描述:此属性每一个背景图片设置初始位置,其位置是相对于由 background-origin 定义位置图层。...属性 - 设置背景图像是固定还是滚动 描述: 此属性决定背景图像位置是在视口内固定,或者随着包含它区块滚动。...*/ background-attachment: fixed; /* 背景相对于视口固定,不会随着元素内容滚动 */ background-attachment: local; /* 背景相对于元素内容固定

    22610

    你可能不是那么了解 CSS Background

    none CSS2.1 background-repeat 指定如何重复背景图像 repeat CSS2.1 background-attachment 设置背景图像是否固定或者随着页面的其余部分滚动...图片 背景固定 background-attachment 有时候在一些网站上会看到,滚动页面的时候,背景图片是固定。...那就是使用 background-attachment: fixed 做到background-attachment: fixed 背景固定 ?...图片 扩展属性 background: element 一个特殊扩展属性,可以某个元素设置另一元素背景。惊不惊喜,意不意外!...图片 demo2 当设置背景元素是图片时,背景图不会随原图大小样式改变改变,不过平铺等背景样式依然是支持 .div { width: 200px; height

    1.4K20

    从头学前端-CSS基础02

    > 无法直接设置宽度和高度,设置无效 > 默认宽度是本身内容宽度 > 行内元素只能放置文本和其他行内元素 > a标签可以放置块级元素;不能放置a标签 行内块元素:> 在行内元素几个特殊标签 img...; > CSS背景背景样式可以设置背景颜色,背景图片,背景平铺,背景图片位置,背景图片固定背景颜色: backgroud-color 默认是透明色;> 背景颜色半透明效果: background: rgba...,第一个参数X轴,第二值Y轴背景图片固定background-attachment设置背景图片是否随着页面滚动> background-attachment: fixed | scroll> 默认值...scoll.随着对象内容滚动而移动背景复合写法:background> 对于顺序没有要求,一般写法背景颜色,背景图片 背景平铺,背景图片滚动,背景图片位置 > 各个属性以空格隔开CSS三大特性CSS...三大特性:层叠性,继承性、优先级1、层叠性 > 相同选择器设置同一个属性(存在样式冲突),新属性层叠或覆盖旧属性;层叠性遵循就近原则,且只会覆盖相同样式2、继承性:> 子标签继承父标签某些样式,主要是文字相关属性样式

    73220
    领券