设置图片样式和背景
图片是网页中不可缺少的内容，它能使页面更加丰富多彩，能让人更直观地感受到网页所要传达给浏览者的信息。下面将详细介绍CSS设置图片风格样式的方法，包括图片的边框和图片的缩放等等。
在HTML中，大家都知道，图片即img元素，作为HTML的一个独立对象，需要占据一定的空间。因此，img元素在页面中的风格样式仍然用盒模型来设计.
图片样式设计
1.设置图片边框
在HTML中可以直接通过<img>标记的border属性值为图片添加边框，属性值为边框的粗细，以像素为单位，从而控制边框的粗细。当设置border属性值为0时，则显示没有边框。
例如：
<img src="001.jpg" border="0"> <!--显示为没有边框-->
<img src="001.jpg" border="1"> <--显示边框的粗细为 1px-->
<img src="001.jpg" border="2"> <--显示边框的粗细为 2px-->
<img src="001.jpg" border="3"> <--显示边框的粗细为 3px-->
<img src="001.jpg" border="4"> <--显示边框的粗细为 4px-->
通过浏览器的解析，图片的边框粗细从左至右依次递增，效果如下：
通过浏览器的解析，图片的边框粗细依次递增，效果如上。
然而使用这种方法有很大的限制，即所有的边框都只能是黑色，而且风格十分单一，都是实线，只是在外边框粗细上能够进行调整。
如果希望改变边框的颜色，或者换成虚线边框，仅仅依靠HTML是不够的，是无法实现的。下面将会讲到如何使用CSS样式美化图片的边框。
例如：
<html lang="en">
<head>
<meta charset="utf-8">
<style type="text/css">
.demo1{
border-style:dotted; /*点画线边框*/
border-color: #996600; /*边框颜色为金黄色*/
border-width: 4px; /*边框粗细为4px*/
margin:2px;
}
.demo2{
border-style:dashed; /*虚线边框*/
border-color: blue; /*边框颜色为蓝色*/
border-width: 2px; /*边框粗细为2px*/
margin:2px;
}
.demo3{
border-style:solid dotted dashed double; /*4边的线型依次为实线，点画线，虚线和双线边框*/
border-color:red green blue purple; /*4边的颜色依次为红色，绿色，蓝色和紫色*/
border-width: 1px 2px 3px 4px; /*4边的边框粗细依次为1px 2px 3px 4px*/
margin:2px;
}
</style>
</head>
<body>
<img src="21.jpg" class="demo1">
<img src="21.jpg" class="demo2">
<img src="21.jpg" class="demo3">
</body>
</html>
效果如下：
如果希望分别设置4条边框的不同样式，在CSS中也是可以实现的，只需要分别设定 border-left、border-right、border-top、border-bottom的样式即可，依次对应于左、右、上、下4条边框。
2.设置图片缩放
使用CSS样式控制图片的大小，可以通过width 和height两个属性来实现。需要注意的是，当width和height两个属性的取值使用百分比数值时，它是相对于父元素而言的。如果将这两个属性设置为相对body的宽度或高度，就可以实现当浏览器窗口改变时，图片大小也发生相应变化的效果。
设置图片的缩放如下：
<html lang="en">
<head>
<meta charset="utf-8">
<style type="text/css">
.demo1{
width:30%;
height:40%;
}
.demo2{
width:150px;
height:150px;
}
</style>
</head>
<body>
<div >
<img src="21.jpg" >
<img src="21.jpg" class="demo1">
<img src="21.jpg" class="demo2">
</div>
</body>
</html>
效果如下：
说明：
在demo1中定义width和height两个属性的取值为百分比数值，该数值是相对与div容器而言的，而不是相对于图片本身。
demo2中定义width和height 两个属性的取值为绝对像素值，图片将按照定义的像素值显示大小。
图片背景设计
1.设置背景颜色
在HTML中，可以使用标签bgcolor属性设置网页的背景颜色。而在CSS里，不仅可以用background-color属性来设置网页背景颜色，还可以设置文字背景颜色。
语法：backround-color:color|transparent
参数：color指定颜色，transparent表示透明的意思，也是浏览器的默认值。
设置背景颜色如下：
<html lang="en">
<head>
<meta charset="utf-8">
<style type="text/css">
body{
background-color: #087;
}
h1{
font-family: 黑体；
background-color:orange;
}
}
</style>
</head>
<body>
<h1>
标题
</h1>
<p>
这里是文本内容
</p>
</body>
</html>
效果如下：
2.设置背景图像
CSS除了可以设置背景的颜色，还可以用background-image来设置背景图片。
语法：background-image:url(url)|none
参数：url表示要插入背景图片的路径。none表示不加载图片。
说明：设置对象的背景图片。若把图像添加到整个浏览器窗口，可以将其添加到<body>标签中。
设置背景图片如下：
<html lang="en">
<head>
<meta charset="utf-8">
<style type="text/css">
body{
background-color: #66f;
background-image: url(11.jpg);
background-repeat: no-repeat;
}
}
</style>
</head>
<body>
</body>
</html>
效果如下：
需要说明的是，如果网页中某元素同时具有background-image属性和background-color属性，那么background-image属性优先于background-color属性，也就是说背景图片永远覆盖在背景色之上。
3.设置背景重复
当背景图片的大小小于元素区域时，可以使用background-repeat属性设置是否及如何重复背景图片。
在默认情况下，图像会自动向水平和竖直两个方向平铺。如果不希望平铺，或者只希望沿着一个方向平铺，可以使用background-repeat属性来控制。
语法：background-repeat:repeat | no repeat | repeat-x | repeat-y
参数：repeat表示背景图像在水平和竖直方向平铺;no-repeat表示背景图像不平铺。
说明：设置对象的背景图像是否平铺及如何平铺。必须先指定对象的背景图片。
设置背景重复，如下：
（1）背景不重复
<html lang="en">
<head>
<meta charset="utf-8">
<style type="text/css">
body{
background-color: #66f;
background-image: url(11.jpg);
background-repeat: no-repeat；
}
</style>
</head>
<body>
</body>
</html>
（2）背景重复
<html lang="en">
<head>
<meta charset="utf-8">
<style type="text/css">
body{
background-color: #66f;
background-image: url(11.jpg);
background-repeat: repeat;
}
</style>
</head>
<body>
</body>
</html>
（3）背景水平重复
<html lang="en">
<head>
<meta charset="utf-8">
<style type="text/css">
body{
background-color: #66f;
background-image: url(11.jpg);
background-repeat: repeat-x;
}
</style>
</head>
<body>
</body>
</html>
（4）背景竖直重复
<html lang="en">
<head>
<meta charset="utf-8">
<style type="text/css">
body{
background-color: #66f;
background-image: url(11.jpg);
background-repeat: repeat-y;
}
</style>
</head>
<body>
</body>
</html>
