学习随笔——CSS背景样式——2020.11.10
(一)背景颜色:background-color:颜色
- 设置背景色
- 颜色名称:例如red
- 颜色16进制数值:例如#FF0000
- rgb色值:rgb(255,0,0),rgba()
- transparent:默认背景透明
(二)背景图像:background-image:url(图片地址)
- url():指向背景图片
- none:无背景图片,默认
(三)背景重复方式:background-repeat
- repeat:默认,垂直水平重复
- repeat-x:水平方向重复
- repeat-y:垂直方向重复
- no-repeat:不重复
(四)背景图像位置:background-position:水平,垂直(取值可以是关键字,百分比,绝对值)
- 水平:left左,center中,right右
- 垂直:top上,center中,bottom下
- top left
- top center
- top right
- center left
- center center
- center right
- bottom left
- bottom center
- bottom right
- 如果只定义了第一个值,那么第二个必然是center
- 百分比x%,y%:如果只定义了第一个值,另一个必然是50%
- 绝对值x,y:如果只定义了第一个,另一个必然是50%
备注:
1.css雪碧图实现背景就是基于背景定位(取值为绝对数值)
2.背景图片的显示原则
- 当容器尺寸大于图片尺寸,背景图片将默认平铺,直至铺满元素
- 当容器尺寸小于图片尺寸,只显示元素范围以内的背景区域。如果设置了位置,则按照位置的设置来显示;如果没有设置位置,则从背景图左上角开始显示
(五)background复合用法
- background:背景颜色 背景图片 背景重复方式 背景位置 背景依附性
- background:#fff url(图片地址) no-repeat left center fixed
- 属性值的顺序可调换,建议按照上述顺序书写
- 复合写法中不支持背景尺寸
- 如果需要定义背景尺寸,需要单独定义background-size属性
(六)背景依附性:background-attachment
- 设置背景图像是否固定或者随着页面的其余部分滚动
- scroll:默认值,背景图像会随着页面其余部分滚动而滚动
- fixed:背景固定,不随滚动条滚动
(七)背景尺寸:background-size:宽度(水平) 高度(垂直) (取值可以是:绝对值,百分比,关键字)
CSS3之前,背景图像的大小由图像的实际大小决定,而CSS3可以指定背景图片的大小可以设置成关键字,像素值,百分比(该百分比是相对于该背景所在元素的宽度和高度的百分比)
- 20px 20px
- 50% 50%
- auto——设置背景宽度或高度后,另一个值可以使用auto自适应
- contain——背景长度比例不变,将背景完整地显示在元素内,背景不会被裁切,元素的上下或者左右可能有留白
- cover——背景长度比例不变,将背景图像缩小或拉伸,铺满整个元素,元素上上下下和左右都不会留白,背景图片会有些部分被裁剪
(八)同一元素中显示多个背景
可以设置多个背景,用逗号隔开
- background-image:url(),url(),url();
- background-repeat:no-repeat,repeat-x,repeat-y;
- background-position:3% 98%,center,top;
- 多个背景复合写法:background:url(“one.jpg”)right bottom no-repeat,url(“two.jpg”)left top repeat-x;
在多个复合写法中,如果想要添加背景颜色,那么就必须在最后一张背景图片的url前面添加
(九)background-origin(设置背景图片的定位区域,属性值有三个)
- border-box 背景从border区域就开始
- padding-box 背景从padding区域开始
- center-box 背景只从正文开始
(十)background-clip(设置背景颜色的绘制区域,属性值有两个)
- padding-box 背景颜色从padding区域开始
- content-box 背景颜色只从正文开始
(十一)背景颜色渐变gradient