前端学习(二十二) 背景(css)

background-color

背景颜色,值为color值,例如#ffffff,或者一个rgb/rgba值,如果是rgba值,背景色有透明度的时候,并不会造成内容变透明,只会造成背景透明

background-image

可以写多个,多个用,号隔开,如果有多张图片,那么会叠加起来,并不是前面的找不到生效后面的,写在前面的在上层,写在后面的在下层

如果又有颜色,又有图片,那么颜色会在图片的下层,颜色永远在最底层

background-repeat

图片默认X轴,Y轴平铺的,同样也可以写多个值,以“,”号隔开,因为background-image有多个值,那么同样background-repeat的值对应background-image的值,但是,例如

background:no-repear repeat;这两个值没有以逗号隔开,说明是针对一个属性值作出的修饰,它的意思是,X轴不平铺,Y轴平铺,相当于值是repeat-y;

background-attachment

可以设置多个值,当内容过长时,背景是不是跟着滚动,还是背景是固定住的不跟着内容滚动

scroll:默认值,默认是不跟着滚动

local:背景跟着滚动

background-position

设置图片位置,可以多个值,例如:bacground-position:0 0这个就是左上角对焦,另外,之前讲到的精灵图,也是通过这个background-position设置的图片显示

线性渐变linear-gradient()

background-image:linear-gradient(20deg,red,blue,green),linear-gradient(to right bottom,red,blue,green),第一个是角度,第二个是颜色

径向渐变radial-gradient()

background-image:radial-gradient(circle 100px at 0 0,red,blue),正圆 半径100px 圆心在0 0, 颜色从红色到外边的蓝色


如果渐变要平铺则在前面加上repeating-,例如background-image:repeating-linear-gradient(red,green 20px,red 40px);


当设置了背景图片时,默认所在的盒模型位置是在padding-box,如果要设置在content-box,或者border-box,则用background-origin:context-box

background-clip:content-box,图片只显示在content-box的部分


background-size,设置图片的大小


猜你喜欢

转载自blog.csdn.net/zy21131437/article/details/80874076
今日推荐