最近一次需求中对于background相关的一些属性使用较多,总结下,希望提高下次的开发效率
background属性
background-colorbackground-imagebackground-positionbackground-sizebackground-repeatbackground-originbackground-clipbackground-attachment一. background-color
没啥好说的,应该不会有人没有过吧
默认值:transparent可取值:色彩值元素背景的范围:这种颜色会填充元素的内容、内边距和边框区域层级:background-image背景层级更高,会盖住background-color
元素背景范围可以通过属性 调整
二. background-image
可取值:图片路径背景的范围:从内边距开始填充背景background-image其实是从内边距开始填充,是因为background-origin的默认值是padding-box,可以改变的
三. background-position
作用:设置背景图像的起始位置
可取值
补充:
(1). top bottom:取值无效
(2). 以上表格中的%数值计算方式见第4点关于%有话说
(3). 多张图片的时候用 “,” 隔开。如: 0 0, center;
关于px值有话说
px值是相对自身位置的偏移
关于%有话说
当指定百分比值的时候,实际上执行了以下的计算公式(该公式可以用数学方式定义图片和容器相对位置重合)
(container width - image width) * (position x%) = (x offset value)
(container height - image height) * (position y%) = (y offset value)
此处;这个contain width在background-origin取 padding-box的时候(等于盒子padding + width content)
所以,如果背景图片的大小和容器一样,那设置百分比的值将永远无效,因为“容器和图片的差”为0(图片永远填满容器,并且图片的相对位置和容器的相对位置永远重合)。在这种情况下,需要为偏移使用绝对值(例如px)
50% 和center的区别
个人感觉是一样的
四. background-size
作用:设置背景图片大小。图片可以保有其原有的尺寸,或者拉伸到新的尺寸,或者在保持其原有比例的同时缩放到元素的可用空间的尺寸。可取值:关于%有话说% 的宽度对应的是 container width;container width理解就是铺背景图片的区域宽度
五. background-repeat
作用:定义背景图像的重复方式。可取值:六. background-origin
作用:指定背景图片的原点位置背景相对区域.自我理解:背景图片“铺”的区域;决定content width的大小可取值:注:background-origin 都是对应区域的外边界
七. background-clip
作用:设置元素的背景**(背景图片或颜色)**是否延伸到边框、内边距盒子、内容盒子下面—MDN的说法个人理解:个人感觉该属性是仅仅对background-color生效的可取值:与background-clip的区别:原因: 其值设置成 border-box(或者content-box);背景图片依然还是按在padding-box区域内显示(因为background-origin的值默认padding-box)
(1). 该属性的设置对background-color的也有效
(2). 该属性不会对background-position有任何影响,background-orgin会影响的
可以理解该属性就是把想隐藏的部分隐藏了
注:background-clip 都是对应区域的外边界
八. background-attachment
作用:决定背景图像的位置是在视口内固定,或者随着包含它的区块滚动。可取值:实际效果区分可以移到这里体验:/zh-CN/docs/Web/CSS/background-size
对background-position的影响
background-attachment:fixed 后,相对的是浏览器的高度;相当于背景被设置在了body上。