CSS笔记 设置背景图片

一.图片大小，存放方式

我们在div中存放这个图片
然后再CSS中设置这个图片的样式

1. 首先存入图片，后面的 url是图片的地址，一定要写

background-image: url(images/p.png);

2. 设置图片大小

width: 1000px;
height: 1000px;

这个时候图片是平铺在盒子大小里的 ，是默认的

---

3. 设置图片存放方式
   ①不平铺

/* 不要平铺 */
background-repeat: no-repeat;

---

②横向平铺

/* 横向平铺 */
background-repeat: repeat-x;

---

③纵向平铺

/* 纵向平铺 */
 background-repeat: repeat-y;
}

4. 设置背景颜色（背景图可以压住背景颜色）

div {
    background-image: url(images/p.png);
    width: 1000px;
    height: 1000px;

    /* 不要平铺 */
    background-repeat: no-repeat;
    background-color: black;
}

二.图片位置

1. 使用background-position: ;来设置

div {
    background-image: url(images/p.png);
    width: 1000px;
    height: 1000px;

    /* 不要平铺 */
    background-repeat: no-repeat;
    background-color: black;

    background-position: bottom;
}

还有方位名词是top，left，right，center

---

2. 也可以设置左上角，右上角

/* 整体 */
body {
    font: 16px/28px "Microsoft YaHei";
}

div {
    background-image: url(images/p.png);
    width: 1000px;
    height: 1000px;

    /* 不要平铺 */
    background-repeat: no-repeat;
    background-color: black;

    background-position: left top;     // 设置方位
}

---

3. 使用坐标

 background-position: 500px 300px;

---

注：这个背景图片和之前的img标签的区别是什么？

背景就是字面意义上的背景，我们之前将这背景图片设计在div里面，然后再div里面写字，也就是写在这个背景图片上

<div> <h1>好大的字啊</h1> </div>

如果是之间的图片标签

<diV><img src="images/p.png"><h1>好大的字啊</h1></diV>
</body>

则不会出现在图片上面

---

实例

/* 整体 */
body {
    background-image: url("images/background.jpg");
    background-repeat: no-repeat;
}

三.背景图片固定

使用background-attachment: ;
他有两个参数，一个是scroll，另一个是fixed
scroll是会随着滚动，为默认值
另一个是不会随着滚动

/* 整体 */
body {
   background-image: url(images/background.jpg);
   background-repeat: no-repeat;
   background-attachment: fixed;
}

这样背景就不会动了

四.复合写法

background：背景颜色 背景图片 平铺方式 是否滚动 位置
比如background: black url("images/background.jpg") no-repeat fixed center top;

五.背景颜色透明度

使用background: rgba(0, 0, 0, .5);
其中0，0，0，.5分别代表R，G，B，透明度为0.5

---

注：如果和刚刚的复合背景颜色一起使用，后面添加的会被使用，之前的失效（背景被更新）

/* 整体 */
body {
    background: rgba(0, 0, 0,.5);
    background: red url("images/background.jpg") no-repeat fixed center top;
}

这里背景颜色是红色，如果不设置red，则背景颜色会是白色

---

/* 整体 */
body {
    background: red url("images/background.jpg") no-repeat fixed center top;
    background: rgba(0, 0, 0,.5);
}

这里就成0.5被透明度的黑色了

---

如果不使用复合写的话，先写背景颜色，就会是0.5倍的灰色

/* 整体 */
body {
    background: rgba(0,0,0,.5);
    background-image: url(images/background.jpg);
    background-repeat: no-repeat;
    background-attachment: fixed;
}

---

如果最后再设置背景颜色话，会直接成为0.5倍的灰色

/* 整体 */
body {
    
    background-image: url(images/background.jpg);
    background-repeat: no-repeat;
    background-attachment: fixed;
    background: rgba(0,0,0,.5);
}