CSS 4.1 样式-背景

来源：互联网发布：阿里云搬瓦工 cn2 编辑：程序博客网时间：2024/05/21 22:55

CSS 4.1 样式-背景

1.CSS允许应用纯色作为背景，也允许使用背景图像创建相当复杂的效果。CSS在这方面的能力远远在HTML之上。注意：所有背景属性都不能继承。

2.背景色 background-color属性。默认值为transparent 透明色。

注：背景作用于元素的border边框范围。

例如1：

<head>

body {background-color: yellow}

h1 {background-color: #00ff00}

p {background-color: gray; padding: 20px;} 注：padding设置内边距，即字与背景的距离

</style>

</head>

结果：

例如2：设置部分文本的背景色

<html>

<head>

span.highlight

{

background-color：yellow；

}

</style>

</head>

<body>

<p>

</p>

</body>

</html>

结果：

3.图片背景background-image属性，默认none无。

格式：background-image：url（图片地址） //与HTML中的str不同!!!

例如：

<html>

<head>

body{background-image：url（/i/eg_bg_04.gif）；}

</style>

</head>

<body>

</body>

</html>

结果：

例如2：多个背景图片

<html>

<head>

body {background-image:url(/i/eg_bg_02.gif);}

p{background-image:url(/i/eg_bg_03.gif);}

p.flower {background-image: url(/i/eg_bg_04.gif); padding: 10px;}

a{background-image: url(/i/eg_bg_07.gif); padding: 10px;}

</style>

</head>

<body>

<p>这是一个p的背景图片段落</p>

<p class="flower">这是一个p.flower的背景图片段落。<a href="#" >一个有放射性背景的链接。</a>

</p>

</body>

</html>

结果：

解释：

①p与p.flower不一样

②a在<p class=“flower”></p>里面，所以这是一个p.flower的背景图片段落。一个有放射性背景的链接。都在一个背景图片之内，又因为a也有背景图片，且有边距，所以有覆盖的地方。

③若这样写：

<p class="flower">这是一个p.flower的背景图片段落。</p>

<a href="#" >一个有放射性背景的链接。</a>

结果为：

4.背景图片的重复background-repeat，默认值repeat

格式：background-repeat：repeat-x（x轴重复）或repeat-y（y轴重复）或repeat（x，y都重复）或no-repeat（不允许任何方向重复）

例如：

<html>

<head>

body{

background-image：url（/i/eg_bg_07.gif）；

background-repeat：repeat；

}

</style>

</head>

</html>

结果：

5.背景位置background-position，默认在左上角。

格式：background-position：位置值

①位置值是关键字，默认是left center

关键字有：top bottom left right center，

i根据规定由两个组成，一个水平方向，一个垂直方向。若只写一个，默认另一个是center。

ii不能是top bottom和left right组合。

iii无顺序规定，left top和top left一样。

②位置值是百分比值，默认是0% 0%，第一个x轴，第二个y轴

背景图片的x%，y%点与样式定义元素（body或h1或p···）的x%，y%点对齐，可以看成是①的扩展。

例如：

③位置值是长度值，默认0px 0px，第一个x轴，第二个y轴

其中x y是图片的左上角距离样式定义元素（body或h1或p）左上角的距离值

6.背景关联属性background-attachment 属性，默认scroll。

格式：background-attachment ：scroll（随页面其余部分的滚动而移动）或fixed（当页面的其余部分滚动时，背景图像不会移动）

7.将背景属性写在一起。

例如：

<head>

body

{

background: #ff0000 url(/i/eg_bg_03.gif) no-repeat fixed center;

}

</style>

</head>

0 0