本文共 2223 字，大约阅读时间需要 7 分钟。
代码块
html页面:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>css3 背景</title>
</head>
<body>
<div class="container bgclip-border">CSS3 background-clip属性-border-box</div>
<div class="container bgclip-padding">CSS3 background-clip属性-padding-box</div>
<div class="container bgclip-content">CSS3 background-clip属性-content-box</div>
<div class="container bgorigin-border">CSS3的background-Origin属性-border-box</div>
<div class="container bgorigin-padding">CSS3的background-Origin属性-padding-box</div>
<div class="container bgorigin-content">CSS3的background-Origin属性-content-box</div>
<div class="container imgSize2">伸展背景图像完全填充内容区域</div>
<div class="container imgSize">CSS3 background-size属性</div>
<div class="container imgContainer2">可以给不同的图片设置多个不同的属性</div>
<div class="container imgContainer">CSS3 background-image属性</div>
</body>
</html>
css样式:
<style type="text/css" media="screen">
.container{
width: 800px;
height: 600px;
padding: 20px;
margin:50px;
}
.imgContainer{
background-image: url(pulpitrock.png),url(dd.png);
background-position: right bottom,left top;
background-repeat: no-repeat,repeat;
}
.imgContainer2{
background: url(bb.png) right bottom no-repeat,url(aa.png) left top repeat;
}
.imgSize{
background:url(jigsaw.jpg);
background-size: 80px 60px;
background-repeat: no-repeat;
}
.imgSize2{
background: url(bg.png);
background-size: 100% 100%;
background-repeat: no-repeat;
}
.bgorigin-content{
background: url(content.png);
background-repeat: no-repeat;
background-size: 100% 100%;
background-origin: content-box;
}
.bgorigin-padding{
background:url(padding.png);
background-repeat: no-repeat;
background-size: 100% 100%;
background-origin: padding-box;
}
.bgorigin-border{
background: url(border.png);
background-repeat: no-repeat;
background-size: 100% 100%;
background-origin: border-box;
}
.bgclip-content{
border:10px dotted black;
background: #008000;
background-clip: content-box;
}
.bgclip-padding{
border:10px dotted black;
background: #008000;
background-clip: padding-box;
}
.bgclip-border{
border:10px dotted black;
background: #008000;
background-clip: border-box;
}
</style>
转载地址：http://oxfbm.baihongyu.com/