CSS基础教程5——背景

103 阅读2分钟

持续创作,加速成长!这是我参与「掘金日新计划 · 10 月更文挑战」的第25天,点击查看活动详情

CSS基础教程5——背景

背景属性用于定义元素的背景效果。

背景色(bgc)

background-color:值;

默认透明色,背景色会撑满整个盒子或模型,背景色不单单可以设置整体,还可以为任何HTML元素设置背景色,例如:<div><h1>等等。

背景图片(bgi)

background-image:url(图片路径);

图片本身时可以设置宽度和高度的,图片路径一样推荐使用相对路径,图片建议保存在项目目录下的img文件夹中,背景图片和背景色不同不是默认撑满整个盒子或模型,默认情况下图像会重复以覆盖整个盒子或模型(如果盒子或模型大小比图片小则图片无法展示全部),背景图片会根据图片本身大小导入,使用背景图像时,请使用不会干扰文本的图像。

图片比盒子或模型小时的效果

捕获.PNG

图片比盒子或模型大时的效果

捕获.PNG

背景平铺(bgr)

background-repeat:值;

值默认平铺repeat,不平铺no-repeat(从盒子或模型左上角开始覆盖直到图片完全显示或者图片未完全显示盒子或模型已满),水平平铺repeat-x(图片第一次覆盖后水平重复),纵向平铺repeat-y(图片第一次覆盖后垂直重复)。

背景位置

background-position:水平方向位置 垂直方向位置;

水平方向取值:left center right,垂直方向取值:top center bottom或者数字+px。

捕获.PNG

背景相关属性连写

background:color image repeat position;

与font属性不同的时背景相关属性的连写是可以不严格按照顺序书写(还是推荐使用这种顺序),并且值可以选择需要的书写(不用全部值都取)。

背景附着(bga)

background-attachment:值;

常用的值有两种,fixed(指定应该固定背景图像)、scroll(指定背景图像应随页面的其余部分一起滚动),背景附着一般比较少用,如果使用时希望连写可以写成background:color image repeat attachment position;

(点击进入专栏查看详细教程)