1.设置背景颜色
background-color: pink; background-color: rgb(255,192,203); /*第四个参数是设置透明度*/ background-color: rgba(255,192,203,0.5);
2.设置背景图片
background-image: url("图片地址");
3.背景图片的显示方式
background-repeat: repeat;
repeat 背景图像将在垂直方向和水平方向重复 默认值,no-repeat 背景图像将仅显示一次
repeat-x 背景图像将在水平方向重复,repeat-y 背景图像将在垂直方向重复
4.图片的起始位置
background-position: top 10px left 10px; background-position: top 10% left 10%;
第一个参数只能是:top,center,bottom,第二个参数只能是:left,right,center
第一个参数控制 上,中,下,第二个参数控制 左,中,右。后面跟参数是指偏移多少,一般不跟参数
5.背景图片是否随着页面滚动
background-attachment: scroll; background-attachment: fixed;
scroll 滚动 默认值,fixed 固定
6.设置背景图片大小
/*当只设置宽度时 高度为auto 图片不变形*/ background-size: 400px; background-size: 100%; /*设置背景图片的宽度与高度*/ background-size: 400px 400px; background-size: 100% 100%;
cover 把背景图像扩展至足够大,以使背景图像完全覆盖背景区域,背景图像的某些部分也许无法显示在背景定位区域中。
contain 把图像图像扩展至最大尺寸,以使其宽度和高度完全适应内容区域。
7.复合写法
background: 颜色 设置图片 设置图片的显示方式 设置是否滚动 设置起始位置;
标签:显示方式,repeat,background,背景,设置,图像,背景图片 From: https://www.cnblogs.com/ErenYeager/p/17025625.html