开创者教程
首页
前端开发
后端开发
数据库
数据分析
开发工具
Git 教程
SVN 教程
SEO 教程
测验/考试
代码笔记
登录/注册
🎁 机器学习（ML）是AI的核心驱动力！全面、实用的 机器学习（ML）教程 现已正式上线
👉 点击学习
实例代码
下载
重置
运行代码
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>background-origin 属性示例</title> <style> div { width: 400px; height: 200px; border: 1px solid black; background-image: url('/uploads/20250413/tree.jpg'); background-position: center; background-repeat: no-repeat; color: #fff; font-weight: bold; display: flex; align-items: center; justify-content: center; text-align: center; margin-bottom:15px; } .size-auto { background-size: auto; } .size-cover { background-size: cover; } .size-contain { background-size: contain; } </style> </head> <body> <h1>background-size 属性演示</h1> <div class="size-auto">auto（原始尺寸）</div> <div class="size-cover">cover（完全覆盖）</div> <div class="size-contain">contain（适应区域）</div> </body> </html>
运行结果：
