利用css3中多背景实现如下效果
利用css3中多背景实现如下效果
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
#box{
width: 623px;
height: 417px;
border: 1px solid black;
margin: 50px auto 0;
/*相对定位*/
position: relative;
}
#box .topl{
width: 312px;
height: 209px;
background-image: url(images/bg1.png);
background-repeat: no-repeat;
/* border: 1px solid red;*/
/*绝对定位*/
position: absolute;
top: 0;
left: 0;
}
#box .topr{
width: 311px;
height: 209px;
background-image: url(images/bg2.png);
background-repeat: no-repeat;
/*border: 1px solid red;*/
position: absolute;
top: 0;
right: 0;
}
#box .bottoml{
width: 312px;
height: 208px;
background-image: url(images/bg4.png);
background-repeat: no-repeat;
position: absolute;
bottom: 0;
left: 0;
}
#box .bottomr{
width: 311px;
height: 208px;
background-image: url(images/bg3.png);
background-repeat: no-repeat;
position: absolute;
bottom: 0;
right: 0;
}
</style>
</head>
<body>
<div id="box">
<div class="topl"></div>
<div class="topr"></div>
<div class="bottoml"></div>
<div class="bottomr"></div>
<div class="con"></div>
</div>
</body>
</html>
