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。
因为如果设置给其他元素，图片会固定，元素不会固定。。。当元素不存在于视觉中，图片就会显示不全或者消失。。。
__x__(36)0908第五天__背景 background
原文地址：https://www.cnblogs.com/tianxiaxuange/p/9610403.html
时间： 2024-11-10 10:51:17