系列文章目录

前端系列文章——传送门
CSS系列文章——传送门

文章目录

• 系列文章目录
• • 0.前言
  • 1.背景的颜色： background-color
  • 2.背景的图像： background-image
  • 3.背景图像是否及如何重复： background-repeat
  • 4.背景图像的起始位置： background-position
  • 5.背景图像是否固定或者随着页面的其余部分滚动： background-attachment
  • 6.背景属性的简写

0.前言

使用背景属性时，需要先设置一个空间 留存使用，设置宽高

1.背景的颜色： background-color

设置颜色透明度	rgba (255, 255, 255l, [0 ~ 1] )

2.背景的图像： background-image

URL			图像的URL

3.背景图像是否及如何重复： background-repeat

repeat		默认，背景图像将向垂直和水平方向重复
repeat-x	只有水平位置会重复背景图像
repeat-y	只有垂直位置会重复背景图像
no-repeat	background-image不会重复
inherit		从父元素继承 background-repeat 属性

4.背景图像的起始位置： background-position

background-position:0px 0px;
第一个值代表水平方向,正值代表向右移动
第二个值代表垂直方向,正值代表向下移动background-position:right bottom;背景图在右下角
水平：left左、right右、center居中
垂直：top上、bottom下、center居中

5.背景图像是否固定或者随着页面的其余部分滚动： background-attachment

scroll		默认，背景图片随着页面的滚动而滚动
fixed		背景图片不会随着页面的滚动而滚动

6.背景属性的简写

background: background-color background-image background-repeat background-attachment background-position[先是水平位置，再是垂直位置]背景色 和 背景图的顺序可以进行对调

同时设置多张背景图 — 需要注意的是 多张背景图的先后顺序，先写的在最上方显示

background:background-image background-repeat background-position,background-image background-repeat background-position,background-image background-repeat background-position；

背景大小单独去设置，按照多背景设置图片的顺序去设置背景大小

background-size: url 1(大小) , url 2(大小)