CSS基础——背景图片设置

background-color 定义元素的背景颜色
background-image 定义元素的背景图片
background-repeat 设置元素背景图片是否平铺
background-position 设置图片在背景中的位置
background-attachment 设置背景图像是否固定或随着页面滚动
background-size 设置背景图片大小

背景图片设置简介

通过 CSS 背景属性，可以给页面元素添加背景样式。

背景属性可以设置背景颜色、背景图片、背景平铺、背景图片位置、背景图像固定等。

设置背景颜色

样式名称：background-color

div{width: 300px;height: 300px;background-color: blue;}

注意：

1. 颜色值可以使用颜色的英文单词、六进制和rgba
2. 元素背景颜色默认值是transparent（透明）

设置背景图片

样式名称：background-image

div{width: 300px;height: 300px;background-image: url(\'./images/62495feb17944a2c.png\');}

注意：

1. 参数值默认是none（无背景图）
2. 地址url使用的是绝对路径或相对路径指定背景图像
3. 常用于logo、装饰性的小图片或是超大背景图片（精灵图也是一种运用场景）

设置背景平铺

样式名称：background-repeat

div {width: 300px;height: 300px;background-image: url(./images/7105166ec283a9f2.png!q70.jpg);background-repeat: no-repeat;}

背景图片位置

样式名称：background-position
使用方式：
background-position: x y；

参数代表的意思是：x 坐标和 y 坐标。 可以使用 方位名词 或者 精确单位

div {width: 300px;height: 300px;background-image: url(./images/7105166ec283a9f2.png!q70.jpg);background-repeat: no-repeat;background-position: 0 0;}

注意：

1. 背景图像有三种定位方式：一是预定义关键词定位。水平方向可选关键字有 left | center | right，垂直方向可选关键字有 top | center | bottom
   如果只指定了一个方位名词，另一个值省略，则第二个值默认居中对齐
2. 二是百分比定位：是将图像本身（x%, y%）的那个点，与背景区域的（x%, y%）的那个点重合。
3. 三是长度值定位：是将背景图像的左上角，放置在对象的背景区域中（x, y）所指定的位置，即 x, y 定义的是背景图像的左上角，相对于背景区域左上角的偏移量。如：background-position: 10px 15px;
   如果只指定一个数值，那该数值一定是 x 坐标，另一个默认垂直居中
4. 如果参数是混合单位，如 background-position: 10px top ;如果指定的两个值是精确单位和方位名词混合使用，则第一个值是 x 坐标，第二个值是 y 坐标

背景图片固定

样式名称：background-attachment

作用：设置背景图像是否固定或者随着页面的其余部分滚动。

background-attachment: scroll;

注意：

1. background-attachment 后期可以制作视差滚动的效果。

背景样式合写

合写样式：background: 背景颜色 背景图片地址 背景平铺 背景图像滚动 背景图片位置;

background: url(\'./images.....\') no-repeat fixed top center;

背景色半透明

使用方法：background:rgba(0,0,0,0.3);
注意：

1. 最后一个参数是 alpha 透明度，取值范围在 0~1之间，可以把0.3的0省略，写成background:rgba(0,0,0,.3);
2. 背景半透明是指盒子背景半透明，盒子里面的内容不受影响

背景样式总结

另：设置背景图片大小

书写样式：background-size

background-size: 80px;

注意：

1. 使用px自定义设置图片的大小，当只设置一个值的时候，将其作为图片的宽度只进行等比缩放
2. 使用百分比设置任意值时，一般也是成对出现，当设置一个值的时候，就成了正方形了
3. 不能放进background里面进行简写