__x__(36)0908第五天__背景 background

Posted 2021-01-05 tianxiaxuange

1. 背景 background: red url(img/cat.gif) repeat-x fixed;

 

---

 

2. 背景颜色 background-color: red;

 

---

 

3. 背景图片 background-image: url(img/cat.gif);

• 如果图片大于元素，则会显示图片左上角部分。
• 如果图片和元素一样大，则会全部显示。
• 如果图片小于元素，则图片会 x 横向， y 纵向 平铺 铺满元素。
• 可以同时设置background-color，作为图片的底色。

---

 

4. 背景图片重复方式 

• background-repeat: repeat;    默认值，x 横向，y 纵向 平铺。
• background-repeat: no-repeat;    不重复。
• background-repeat: repeat-x;    x 横向平铺。
• background-repeat: repeat-y;    y 纵向平铺。

.nav{
    width: 990px;
    height: 32px;

    margin: 10px auto;

    background: #bfc url(img/bg.gif) repeat-x;
}

截取背景 y 纵向一像素，然后“图片-裁剪-存储为Web格式”，选择格式，选大小合适的。

 

---

 

5. 一张图片在元素内显示位置

background-position: 0% 0%;    默认值，从左上角开始显示

（x水平，y垂直）

(1)

x水平: 可选 left，right，center;

y垂直: 可选 top，bottom，center;

注意：如果只写一个值，另一个值默认为center。

(2)

以元素的左上角为原点，设置(100px,100px)

如果指定负值，则向反方向偏移。

---

 

6. 图片 是否 随页面其余滚动background-attachment

• background-attachment: scroll;    默认值，背景图片随滚动条滚动。
• backgroound-attachment: fixed;    背景图会固定在浏览器某个位置，不随滚动条滚动。

缺点： 

一般我们设置窗口固定背景时，都设置给body。

因为如果设置给其他元素，图片会固定，元素不会固定。。。当元素不存在于视觉中，图片就会显示不全或者消失。。。

---