样式声明——背景属性

私人博客

许小墨のBlog —— 菜鸡博客直通车

系列文章完整版，配图更多，CSDN博文图片需要手动上传，因此文章配图较少，看不懂的可以去菜鸡博客参考一下配图！

系列文章目录

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

---

---

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(大小)

---

注

本博文缺失大量图片，严重影响内容完整性以及阅读体验，完整内容请前往本人菜鸡博客——许小墨のBlog