CSS背景图像之基础属性
随着互联网的发展，很多朋友都在从事WEB开发的工作，今天给大家分享一下CSS（样式表）背景图像的基础属性，以后再给大家分享一些CSS背景图像的技巧。
工具/原料
电脑
DW（梦想编织者）
方法/步骤
一.background-color,背景颜色，这个属性比较简单，
.z1 {
background-color: #F00;
}
当然，也可以这样写，用英文字母代替，
.z1 {
background-color: red;
}
完整代码如下;
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
.z1 {
background-color: red;
}
</style>
</head>
<body>
<div class="z1">我喜欢数学</div>
</body>
</html>
在浏览器的效果如下图：
二：background-image，以图片为背景，代码写法：
.z1 {
background-image: url(../Pictures/DNF/300.jpg);
}
url(../Pictures/DNF/300.jpg)表示图片的路径。
三:background-repeat,这个属性定义了图像的平铺模式，其中他有四个属性值，
repeat-x：背景图像将在水平方向重复。
repeat-y：背景图像将在垂直方向重复。
no-repeat：背景图像将在垂直方向重复。
repeat:默认。背景图像将在垂直方向和水平.
代码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
body {
background-image: url(../Pictures/DNF/901.png);
height: 100%;
width: 100%;
font-size: 18px;
color: #F00;
background-repeat: repeat-y;
}
</style>
</head>
<body>
我喜欢吃橘子
</body>
</html>
1.repeat-x：如图:
2.repeat-y：如图:
3.no-repeat：如图:
4.repeat:默认,如图:
四.background-attachment:属性设置背景图像是否固定或者随着页面的其余部分滚动, fixed,当页面的其余部分滚动时，背景图像不会移动。
scroll,默认值。背景图像会随着页面其余部分的滚动而移动。
inherit,规定应该从父元素继承 background-attachment 属性的设置.
五.background-position,设置背景图像的起始位置。
body {
background-image: url(../Pictures/DNF/901.png);
background-repeat: no-repeat;
background-position: 50px 50px;
}
background-position: 50px 50px;表示背景图像离水平距离50px，垂直距离50px的位置。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
body {
background-image: url(../Pictures/DNF/901.png);
height: 100%;
width: 100%;
font-size: 18px;
color: #F00;
background-repeat: no-repeat;
background-position: 50px 50px;
}
</style>
</head>
<body>
我喜欢吃橘子
</body>
</html>
注意事项
以上就是background的常用属性。
background-origin，background-clip，background-size这三个属性比较容易理解，可以去参考W3C.