^_^

background

1、背景色(background-color)

主要介绍以下三种背景属性值

可以为英语代码，例如：

div{
    width:50px;
    height:50px;
    background-color:red;
}
结果：一个宽和高都为50px的红色方块

可以为16进制颜色码，例如：

background-color:#000;

可以为rgb格式：

background-color:rgb(225,182,193);
其中，r代表red红色，g代表green绿色，b代表blue蓝色。

---

2、背景图片(background-image)

例如：

div{
        width:40px;
        height:40px;
        background-image:url("img/tu.png");
    }
给div区域加了一个背景图片。

注意:

• url(“图片路径”);可以是本地的图片路径，也可是线上的有效路径。图片不能用数字1. 或是中文.

• 如果图片较小，则会从div的左上角开始

• 如果图片较大，则会充满div，多余的不显示，只显示div里的图片。

---

3、背景位置(background-position)

例如：

div{
    width:40px;
    height:40px;
    background-image:url("img/tu.png");
    background-position:10px 10px;
}
在div里对图片进行定位，是相对于div进行的定位，分别是沿x轴和沿y轴

注意:

background-position的值可以为正数，也可为负数，也可用百分数,也可以为left center right。

1、background-position:x y;

x:(0px, right, left，center)

y:(0px,top,bottom，center)

2、background-position:0px;

x轴和y轴移动相同的距离

3、backgroun-position:center;

x轴和y轴都在中间

4、background-position:left/right/top/bottom;

x轴和y轴谁能识别谁移动,不能识别的默认为center

---

4、背景是否平铺(background-repeat)

例如：

div{
    width:40px;
    height:40px;
    background-repeat:no-repeat;
}

注意:

属性值：

1、no-repeat  不平铺

2、repeat-x 向着x轴平铺

3、repeat-y向着y轴平铺

---

5、背景大小(background-size)

div{
    width:40px;
    height:40px;
    background-image:url("img/tu.png");
    background-size:20px;
}
对图片的大小进行设置

注意:

• 如果是一个值，对图片进行相对放大或缩小；
• 如果是两个值，第一个值是宽，第二个值是高，会按照这个大小对图片进行改变。

---

6、background的复合写法

background:background-color background-image background-position background-repeat;(推荐写法)

注意:

• background-position和backgrolund-repeat可以换位置，其他的则不可以。

---

body里设置background

在body里可以设置背景图片，但是背景图片不会遵从body的width、height的样式设置，因为背景是作用于可视区域的，而body的可视区域是浏览器的窗口。

---

注意

在设置背景时，必须设置宽和高后才能显示出来，不然背景不会显示。因为背景不会撑开宽和高。