CSS 基础学习-246 css使用contain和cover设置背景图像

hrs 提交于 2023/09/12 - 11:00 , 周二

background-size 的其他两个可能的值是 contain 和 cover。

contain 关键字将背景图像缩放为尽可能大的尺寸(但其宽度和高度都必须适合内容区域)。这样,取决于背景图像和背景定位区域的比例,可能存在一些未被背景图像覆盖的背景区域。

cover 关键字会缩放背景图像,以使内容区域完全被背景图像覆盖(其宽度和高度均等于或超过内容区域)。这样,背景图像的某些部分可能在背景定位区域中不可见。

实例代码:

<!doctype html>
<html>
	<head>
		<meta charset="utf-8">
		<style>
			.box1,.box2,.box3{
				width:150px;
				height:150px;
				border:1px solid black;
				background-image:url(img/flower.gif);
				background-repeat:no-repeat;


			}
			.box1{
				background-size:contain; /*尽可能大*/
			}
			.box2{
				background-size:cover;/*缩放至容器大小 */
			}
			.div-box{
			/*	border:1px solid red; */
				float:left;
				padding:15px;	
				margin-right:10px;
			}
		</style>
	</head>
	<body>
		<h1></h1>
		<div class="div-box">
			<h2>background-color:contain:</h2>
			<div class="box1">lorem ipsum dolor sitamet.</div>
		</div>
		<div class="div-box">
			<h2>background-color:cover:</h2>
			<div class="box2">lorem ipsum dolor sitamet.</div>
		</div>

		<div class="div-box">
			<h2>background-color:未定义:</h2>
			<div class="box3">lorem ipsum dolor sitamet.</div>
		</div>
		<div class="div-box" >
			<p>原始图像</p>
			<img src="img/flower.gif"></img>
		</div>
	</body>
</html>

运行效果:

background-2

标签