开创者教程
首页
前端开发
后端开发
数据库
数据分析
开发工具
Git 教程
测验/考试
代码笔记
登录/注册
🎁 机器学习（ML）是AI的核心驱动力！全面、实用的 机器学习（ML）教程 现已正式上线
👉 点击学习
实例代码
下载
重置
运行代码
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>background-size属性的用法</title> <style> .example { width:400px; height:400px; background-color:lightblue; background-image: url('/uploads/20250507/forest.jpg'); background-repeat:no-repeat; background-size: cover; padding: 20px; min-height: 200px; color:#fff; } </style> </head> <body> <div class="example"> <strong>background-size: cover（当前值）</strong>：这个值会让背景图像等比例缩放，直到完全覆盖整个容器区域。图像会保持原始比例不变，但可能会被裁剪掉部分边缘以确保完全覆盖容器。这是最常用的全屏背景处理方式。 <p>background-size 属性主要取值：</p> <ul> <li><strong>cover</strong>：等比例缩放覆盖整个容器（可能裁剪）</li> <li><strong>contain</strong>：等比例缩放完整显示图像（可能留白）</li> <li><strong>auto</strong>：保持图像原始尺寸</li> <li><strong>具体数值</strong>（如 100px 50px）：指定宽高（可能变形）</li> <li><strong>百分比</strong>（如 100% 80%）：相对于容器尺寸的百分比</li> </ul> <p>使用 cover 时的注意事项：</p> <ul> <li>图像始终填满整个容器，没有空白区域</li> <li>图像中心点默认对齐容器中心（可通过 background-position 调整）</li> <li>窄屏或宽屏时，图像左右或上下边缘可能会被裁剪</li> </ul> <p>如果需要完整显示背景图像（不裁剪），可以使用：</p> <pre>background-size: contain;</pre> </div> </body> </html>
运行结果：
