CSS 基础学习-245 css设置背景图像大小

由 hrs, 11 九月, 2023

实例代码：

<!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>

运行效果：

标签

评论