代码块

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>

QQ截图20181014143201.jpg