12.CSS-背景设置

背景颜色

如何设置标签的背景颜色？
在CSS中有一个background-color:属性，就是专门用来设置标签的背景颜色的。
取值：
具体单词
rgb
rgba
十六进制

背景图片

如何设置背景图片？
在CSS中有一个background-image: url("");属性，就是专门用于设置背景图片的。
注意点：
1.图片地址必须放在url("")中，图片地址可以是本地的地址，也可以是网络的地址；
2.如果图片的大小没有标签的大小大，那么就会自动在水平和垂直方向平铺来填充；
3.如果网页上出现了图片，那么浏览器会再次发送请求获取图片。

背景平铺属性

如何控制背景图片的平铺方式：
在CSS中有一个background-repeat:属性，就是专门用于控制背景图片的平铺方式
取值：
repeat 在水平和垂直方向平铺（默认）
no-repeat 不平铺
repeat-x 在水平方向平铺
repeat-y 在垂直方向平铺

应用场景：
可以通过背景图片的平铺来降低图片的大小，提升网页的访问速度。

背景定位

注意点：
同一个标签可以同时设置背景颜色背景图片，如果颜色和图片同时存在，那么图片会覆盖颜色；
如何控制背景图片的位置？
在CSS中有一个background-position:属性，就是专门用于控制背景图片的位置的。
格式：
background-position: 0 0;
前面是水平方向上的，后面是垂直方向上的

取值：

• 具体方位名词：
  水平方向：left center right
  垂直方向：top center bottom
  默认情况：background-position: left top;
• 具体像素：
  例如：
  background-position: 100px 0;
  一定要写单位，一定要写px！！！
  background-position: -100px 0;
  具体像素可以接受负数。

应用场景：
希望图片中间最核心的内容显示在最核心的位置，一般采用这样的办法：

background-image: url(images/yxlm.jpg);
background-position: center 0;

关联方式

默认情况下，背景图片会随着滚动条的滚动而移出画面，如果不想让图片随着滚动条的滚动而移出画面，那我们就修改背景图片和滚动条的关联方式。
如何修改背景的关联方式？
在CSS中有一个background-attachment:属性，这个属性就是专门用于修改关联方式的。
格式：
background-attachment: scroll;
取值：
scroll（默认）随着滚动条的滚动而滚动；
fixed 不会随着滚动条的滚动而滚动

背景属性缩写

格式：
background:背景颜色 背景图片 平铺方式 关联方式 定位方式；

注意点：
background属性中，任何一个属性都可以被省略

背景图片和插入图片的区别

1.背景图片仅仅只是一个装饰，不会占用位置；
插入图片会占用位置；
2.背景图片有定位属性，所以可以很方便地控制图片的位置；插入图片没有定位属性，所以控制图片不太方便；
3.插入图片的语义比背景图片的语义要强，所以在企业开发中，图片想要被搜索引擎收录，推荐使用插入图片。