前端学习 课堂笔记 CSS篇（三）背景

background-color:rgba    a为透明度

背景图片

属性名: background-image (bgi)
属性值:background-image: url( '图片的路径');

注意点:

• 背景图片中url中可以省略引号
• 背景图片默认是在水平和垂直方向平铺的
• 背景图片仅仅是指给盒子起到装饰效果，类似于背景颜色，是不能撑开盒子的
• 重要信息的图片还是用img插入图片

 背景平铺

属性名：background-repeat（bgr）

属性值：

取值	效果
repeat	(默认值)水平和垂直方向都平铺
no-repeat	不平铺
repeat-x	沿着水平方向(x轴）平铺
repeat-y	沿着水平方向(y轴）平铺

 

背景位置：

属性名：background-position（bgp）

 注意点：方位名词取值和坐标取值可以混使用，第一个取值表示水平，第二个取值表示垂直

属性值连写：

属性名 background (bg)

属性值:
·单个属性值的合写，取值之间以空格隔开

书写顺序:
·推荐: background: color image repeat position

省略问题:
可以按照需求省略
特殊情况:在pc端，如果盒子大小和背景图片大小一样，此时可以直接写background: url()

注意点
如果需要设置单独的样式和连写，要么把单独的样式写在连写的下面，要么把单独的样式写在连写的里面