网站建设
网站备案流程
本机IIS服务器的创建
Win7下配置本机IIS服务器
建网站需要学习的内容
使用表格布局网页
定义网页头文件元素
制作弹出网页
制作网页宣传窗
Div+CSS布局网页
CSS的常见选择器
CSS设置文本样式
CSS设置背景颜色与图像
CSS设置表格样式
HTML中使用CSS的方法
CSS3新增的部分属性1
CSS3新增的部分属性2
CSS3动画与渐变
网页显示MySQL数据库中汉字的乱码问题
HTML5的新特性
HTML5的API
HTML5音视频API
HTML5表单
HTML5表单API
HTML5画布canvas
HTML5拖放API
HTML5地理位置API
HTML5离线应用API
HTML5 Workers多线程
HTML5跨源通信
HTML5 WebSocket通信
HTML5的Web存储API
HTML5本地数据库
HTML5其他一些API
Node.js功能和使用
常用Web前端工具
WebGL编程
GLSL ES语言
使用ThreeJs库3D编程
XML可扩展标记语言
在HTML中，设置网页的背景颜色利用<body>标记的bgcolor属性。在CSS中，不但可以设置网页的背景颜色，还可以设置文字的背景颜色。
网页元素的背景颜色使用background-color属性来设置。示例：
<style type="text/css">
h1{
font-family:黑体;
color:white;
background-color:blue;
}
</style>
如果为整个页面设置背景色，只需要对<body>标记设置background-color属性即可。示例：
body{
background-color:#0FC;
}
在CSS中，可以使用3个字母的颜色表示方法，例如#0FC就等价于#00FFCC。HTML中不允许使用这种表示方法。
2.设置背景图像：
CSS中，还可以用图像作为网页元素的背景，使用background-image属性。示例：
body{
background-image:url(bg.gif);
}
用这种方式设置背景图像后，图像会自动沿着水平和垂直两个方向平铺。为了使页面上的文字不至于和背景混在一起，可以把<p>标记的背景色设置为白色。
其他元素也同样可以使用背景图像，例如可以将示例中的<h1>标记的背景由背景色改为使用图像为背景。
3.设置背景图像平铺：
默认情况下。背景图像会自动向水平和垂直两个方向平铺，这可以由background-repeat属性来控制，有4种属性值：
·repeat：沿水平和垂直两个方向平铺，是默认值。
·no-repeat：不平铺，即只显示一次。
·repeat-x：只沿水平方向平铺。
·repeat-y：只沿垂直方向平铺。
示例：
body{
background-image:url(bg.gif);
background-repeat:repeat-x;
}
CSS中，还可以同时设置背景图像和背景颜色，这样背景图像覆盖的地方就显示背景图像，背景图像没有覆盖到的地方就按照背景颜色显示。示例：
body{
background-image:url(bg.jpg);
background-repeat:repeat-x;
background-color:#D2D2D2;
}
利用这种功能，可以在页面顶部用包含渐变色的背景图像，而下面使用背景颜色，背景颜色的设置为背景图像最下面一排像素的颜色，使背景图像到背景色过度自然，并一直延伸到页面最下端。
背景样式的CSS属性也可以简写，属性之间用空格分隔。示例：
body{
background:#3399FF url(bg.jpg) repeat-x;
}
4.设置背景图像位置：
默认情况下，背景图像显示在元素的左上角。如果需要改变其位置，使用background-position属性。示例：
body{
background-image:url(cup.gif);
background-repeat:no-repeat;
background-position:right bottom;
}
属性background-position中设置两个值：
·第一个值用于设定水平方向的位置，可选择left、center、right。
·第二个值用于设定垂直方向的位置，可选择top、center、bottom。
而且还可以使用具体数值来精确地确定背景图像的位置。示例：
body{
background-image:url(cup.gif);
background-repeat:no-repeat;
background-position:200px 100px;
}
采用数值方式，还可以使用百分比数值。
5.设置背景图片位置固定：
在网页上设置背景图片时，随着滚动条的移动，背景图片也会跟着一起移动。如果想把背景图像设置成固定不变的效果，可以把属性background-attachment的值设为fixed。示例：
body{
background-image:url(cup.gif);
background-repeat:no-repeat;
background-position:30% 60%;
background-attachment:fixed;
}
6.设置标题的图像替换：
计算机操作系统一般都配置了很多英文字库，字体丰富，但中文字体则往往很有限。对于标题文字，为了美观需要就常常使用图像代替文本，但为了搜索引擎收录和后期维护需要，往往还想在网页上保留文字，但不显示，这就出现了一种“图像替换”方式。
例如，设置h1的CSS属性：
body{
height:40px;
background-image:url(h1.gif);
background-repeat:no-repeat;
background-position:center;
}
其中背景图像hi.gif中包含了美观的字体标题。但网页中h1文字还会同时显示，需要隐藏：
h1 span{
display:none;
}
这样，虽然网页中h1包含的文字还存在，但已隐藏，而显示的是作为背景的图片hi.gif。