CSS 允许应用纯色作为背景，也允许使用背景图像创建相当复杂的效果。
纯色背景 背景图像
body{
background: #ff0000 url(/i/eg_bg_03.gif) no-repeat fixed center;
}
1，纯色背景：background-color
body
{
background-color:yellow;
}
h1
{
background-color:#00ff00;
}
p
{
background-color:rgb(255,0,255);
}
元素背景的范围
background-color 属性为元素设置一种纯色。这种颜色会填充元素的内容、内边距和边框区域，扩展到元素边框的外边界（但不包括外边距）。如果边框有透明部分（如虚线边框），会透过这些透明部分显示出背景色
<html>
<head>
<style type="text/css">
body {background-color: yellow}
h1 {background-color: #00ff00}
h2 {background-color: transparent}
p {background-color: rgb(250,0,255)}
p.no2 {background-color: gray; padding: 20px;}
p.no2 {background-color: gray; padding: 20px;margin:20px;border: 4px red dotted;}
</style>
</head>
<body>
<h1>这是标题 1</h1>
<h2>这是标题 2</h2>
<p>这是段落</p>
<p class="no2">这个段落设置了内边距。</p>
<p class="no3">background-color 属性为元素设置一种纯色。这种颜色会填充元素的内容、内边距和边框区域，扩展到元素边框的外边界（但不包括外边距）。如果边框有透明部分（如虚线边框），会透过这些透明部分显示出背景色</p></body>
</html>
可能的值
| 值 | 描述 |
|---|---|
| color_name | 规定颜色值为颜色名称的背景颜色（比如 red）。 |
| hex_number | 规定颜色值为十六进制值的背景颜色（比如 #ff0000）。 |
| rgb_number | 规定颜色值为 rgb 代码的背景颜色（比如 rgb(255,0,0)）。 |
| transparent | 默认。背景颜色为透明。 |
| inherit | 规定应该从父元素继承 background-color 属性的设置。 |
2背景图像
body {background-image:url(/i/eg_bg_04.gif);}
a: background-repeat 平铺
background-repeat ：repeat；
HTML DOM
Document.body.style.backgroundRepeat="repeat-y";
| body{ background-image: url(/i/eg_bg_03.gif); background-repeat: no-repeat } |
body |
body |
|
|
b:背景定位：background-position
p{
background-image:url(‘bgimg.gif‘);
background-repeat:no-repeat;
background-position:top;// 关键字
}
下面是等价的位置关键字：
| 单一关键字 | 等价的关键字 |
|---|---|
| center | center center |
| top | top center 或 center top |
| bottom | bottom center 或 center bottom |
| right | right center 或 center right |
| left | left center 或 center left |
body { background-image:url(‘/i/eg_bg_03.gif‘);
background-repeat:no-repeat;
background-position:50% 50%;//百分数值
}
body
{
background-image:url(‘/i/eg_bg_03.gif‘);
background-repeat:no-repeat;
background-position:50px 100px;//长度值
}c:背景关联 background-attachment: fixed;
可能的值
| 值 | 描述 |
|---|---|
| scroll | 默认值。背景图像会随着页面其余部分的滚动而移动。 |
| fixed | 当页面的其余部分滚动时，背景图像不会移动。 |
| inherit | 规定应该从父元素继承 background-attachment 属性的设置。 |
HTMLDOM ：document.body.style.backgroundAttachment="fixed";时间： 2024-11-05 23:26:27