body {
width: 600px;
height: 500px;
border: 10px solid #789;
margin: 10px 100px;
padding: 40px;
background: pink url("/images/shanghai_lupu_bridge.jpg") no-repeat;
/*background: url("/images/eg_tulip.jpg") no-repeat;
background-origin: content-box;
background-position: right;*/
background-position: center;
}
body里设置background-image后，body的宽和高无法约束image的位置；
但其他标签可以约束image的位置，如下：
.zhujieshao {
width: 100px;
height: 140px;
padding: 20px;
border: 6px solid #18E;
background: url("/images/shanghai_lupu_bridge.jpg") no-repeat;
background-position: left bottom;
background-origin: content-box;
float: left;
}
完整代码：
<html>
<head>
<title>TODO supply a title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<style type="text/css">
body {
width: 600px;
height: 500px;
border: 10px solid #789;
margin: 10px 100px;
padding: 40px;
background: pink url("/images/shanghai_lupu_bridge.jpg") no-repeat;
/*background: url("/images/eg_tulip.jpg") no-repeat;
background-origin: content-box;
background-position: right;*/
background-position: center;
}
#header {
border: 1px solid #14C;
width: 550px;
height: 450px;
margin: 0 auto; background: url("/images/eg_tulip.jpg") no-repeat;
}
.zhujieshao {
width: 100px;
height: 140px;
padding: 20px;
border: 6px solid #18E;
background: url("/images/shanghai_lupu_bridge.jpg") no-repeat;
background-position: left bottom;
background-origin: content-box;
float: left;
}
</style>
</head>
<body id="er">
<div id="header">
<div class="zhujieshao" id="content1"></div>
<div class="zhujieshao" id="content2"></div>
<div class="zhujieshao" id="content3"></div>
<div class="zhujieshao" id="content4"></div>
<div class="zhujieshao" id="content5"></div>
<div class="zhujieshao" id="content6"></div>
</div>
</body>
</html>
时间： 2024-12-14 18:07:33