实例代码：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style>
.div-size1{
background-image:url(img/OIP-C.png);
padding:15px;
border:1px solid red;
background-repeat:no-repeat; /*取消图像重复*/
background-size:50px 50px;
background-position:right 20px top 20px; /*设置图像位置*/
}
.div-size2{
background-image:url(img/OIP-C.png);
padding:15px;
border:1px solid red;
background-repeat:no-repeat;
background-position:right 10px top 10px;
}
</style>
</head>
<body>
<h1>设置图像背景大小</h1>
<p>被调整大小的 background-image:</p>
<div class="div-size1">
<p>shanghai is one of the four direct-administered municipalities of the People's Republic of china.welcome shanghai.</p>
<p>The city is located on the southern estuary of the Yangtze,with the Huangpu River flowing through it .</p>
</div>
<p>background-image 的原始尺寸：</p>
<div class="div-size2">
<p>shanghai is one of the four direct-administered municipalities of the People's Republic of china.welcome shanghai.</p>
<p>The city is located on the southern estuary of the Yangtze,with the Huangpu River flowing through it .</p>
</div>
</body>
</html>
运行效果：
评论