3. CSS 样式---背景
2019-06-28 本文已影响0人
晨曦Bai
1. 背景色
background-color
- background-color 不能继承
- 默认值是
transparent，透明的 - 语法：
body {background-color: gray;}
2. 背景图像
background-image
- background-image 属性的默认值是none，表示背景上没有放置任何图像
- background-image 不能继承，事实上，所有背景属性都不能继承
- 如果需要设置一个背景图像，必须为这个属性设置一个url 值
- 语法：
body {background-image:url(/i/en_bg_04.gif);}
<head>
<style type="text/css">
body { background-image: url(/i/pic1.gif);}
p.flower {background-image: url(/i/pic2.gif);}
a.radio {background-image: url(/i/pic3.gif);}
</style>
</head>
<body>
<p class="flower"> this is a flower background
<a href="#" class="radio"> this is a radio background link
</a>
</p>
</body>
3. 背景重复
background-repeat
- 对背景平铺,默认是从元素左上角开始
- repeat-x 水平平铺
- repeat-y 垂直平铺
- no-repeat 不在任何方向平铺
- repeat 默认，背景图像将向垂直方向和水平方向重复
- inherit 规定应该从父元素继承background-repeat 属性的设置
<head>
<style type="text/css">
body {
background-image: url(/i/pic4.gif);
background-repeat: repeat-y;}
</style>
</head>
4. 背景定位
background-position
- 使用该属性改变图像在背景中的位置
-
background-position的属性值可以是关键字(top，bottom，left，right，center，一般成对出现，一个对应水平方向，一个对应垂直方向, 如果只出现一个，则认为另一个关键字是center) ， -
background-position的属性值也可以使用长度值，如50px 100px； -
background-position的属性值也可以是百分数值，如50% 50%
<head>
<style type="text/css">
----- 关键字
p.class1 {
background-image: url('/i/pic5.gif');
backgrond-repeat: no-repeat;
background-position: top right; // 右上角
}
------- 百分数值
p.class2 {
background-image:url('/i/eg_bg_03.gif');
background-repeat:no-repeat;
background-position:50% 50%;
}
------- 长度值
p.class3 {
background-image:url('/i/eg_bg_03.gif');
background-repeat:no-repeat;
background-position:50px 100px; // 图像的左上角从左向右50px ；从上到下100px
}
</style>
</head>
| 单一关键字 | 等价的关键字 |
|---|---|
| center | center center |
| top | top center 或 center top |
| bottom | bottom center 或 center bottom |
| right | right center 或 center right |
| left | left center 或 center left |
5. 背景关联
background-attachment
- 防止出现当文档滚到超过图像的位置时，图像就会消失
- background-attachment: fixed // 图像相对于可视区是固定的，因此不会受到滚到的影响。
- background-attachment: scroll //默认，是背景会随文档滚动
body
{
background-image:url(/i/eg_bg_02.gif);
background-repeat:no-repeat;
background-attachment:fixed
}
