前端学习笔记（4）之css背景属性合集

背景颜色background-color

默认情况下背景颜色会延伸到border的区域，把border设置成点状可观察。

背景图：background-image：url（）；

容器>背景图 ： 背景图平铺，直到铺满，显示多张背景图
容器=背景图 ： 只显示一张
容器<背景图 ： 只显示背景图的一部分

背景图平铺状态：background-repeat：；

no-repeat 只铺一张背景图
repeat-x 横向平铺
repeat-y 纵向平铺
repeat 双方向直到铺满

背景图的位置：background-position：；

用来设置背景图片的位置。容器内就相当于九宫格内选择位置。
设置方式：
通过top left right bottom center 几个表示方位的词来设置背景。至少两个值。如果只写一个值，第二值默认是center。

background-position：center center； 表示九宫格中间。
background-position：bottom right 表示九宫格右下角

也可以通过像素来设置：
background-position：10px 100px ；（水平方向偏移量 垂直方向偏移量）
把左上角当做原点，上边框是x轴，左边框是y轴。（一般用到负值更多）

背景图大小background-size

background-size 设置图片的尺寸
可选值：
width height 如果只写一个 第二个值默认auto。
cover 图片比例不变，将元素铺满
contain 图片比例不变，让图片在元素中完整显示

背景图的固定background-attachment

• 设置背景图片是否跟随元素移动
• 可选值：
  scroll 默认值，背景图片会跟随元素移动
  fixed 背景会固定在页面中，不会随元素移动

背景的简写属性background

示例：
background: red url() no-repeat left center;