<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.box {
width: 500px;
height: 500px;
margin: 100px auto;
border: 1px solid #000;
background: url("11.png") no-repeat;
/* 背景图片显示尺寸(放大/缩小背景图) */
background-size: 200px 200px; /* 通过像素设置 */
background-size: 50% 50%; /* 通过百分比设置 */
background-size: cover; /* 覆盖:图片成比例填满盒子。可用于适配 */
background-size: contain; /* 包含:图片成比例放大,可能不会填满盒子。可用于适配 */
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
CSS3 背景图片显示尺寸(放大/缩小背景图)(background-size) (背景适配 自适应)
最新推荐文章于 2024-02-17 03:44:31 发布
该博客介绍了如何使用CSS来控制背景图片的显示尺寸,包括通过像素和百分比设置`background-size`属性,以及使用`cover`和`contain`关键字实现背景图片的自适应填充或包含。内容详细解释了各种方法在不同场景下的适用性,帮助开发者更好地调整网页背景图片效果。
摘要由CSDN通过智能技术生成