<!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) (背景适配 自适应)
2023-11-03
29
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《
阿里云开发者社区用户服务协议》和
《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写
侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介：
CSS3 背景图片显示尺寸(放大/缩小背景图)(background-size) (背景适配 自适应)
目录
相关文章
|
4月前
|
前端开发
JavaScript
|
17小时前
|
编解码
缓存
前端开发
【专栏：HTML与CSS移动端开发篇】移动端网页布局与适配
【4月更文挑战第30天】本文探讨了如何使用HTML和CSS优化移动端网页布局与适配，强调响应式设计、灵活布局和媒体查询的重要性。针对移动设备的屏幕尺寸、操作方式、网络速度和性能差异，提出了断点选择、触摸优化、图像和性能优化等最佳实践。测试和调试、框架工具的应用也是关键步骤，以确保在多设备上提供优秀用户体验。开发者需持续学习新趋势和工具，以适应移动端发展。
6
1
1
|
1天前
|
前端开发
|
14天前
|
前端开发
|
14天前
|
前端开发
容器
|
16天前
|
前端开发
容器
CSS3属性详解（一）文本 盒模型中的 box-ssize 属性 处理兼容性问题：私有前缀 边框 背景属性 渐变 前端开发入门笔记（七）
CSS3属性详解（一）文本 盒模型中的 box-ssize 属性 处理兼容性问题：私有前缀 边框 背景属性 渐变 前端开发入门笔记（七）
27
2
2
|
2月前
|
前端开发
容器
|
3月前
|
前端开发
UED
|
3月前
|
前端开发
JavaScript
API
掌握CSS Flexbox，打造完美响应式布局，适配各种设备！
欢迎来到前端入门之旅！这个专栏是为那些对Web开发感兴趣、刚刚开始学习前端的读者们打造的。无论你是初学者还是有一些基础的开发者，我们都会在这里为你提供一个系统而又亲切的学习平台。我们以问答形式更新，为大家呈现精选的前端知识点和最佳实践。通过深入浅出的解释概念，并提供实际案例和练习，让你逐步建立起一个扎实的基础。无论是HTML、CSS、JavaScript还是最新的前端框架和工具，我们都将为你提供丰富的内容和实用技巧，帮助你更好地理解并运用前端开发中的各种技术。
23
0
0
|
4月前
|
前端开发
热门文章
最新文章
1
【CSS进阶】使用CSS gradient制作绚丽渐变纹理背景效果（下）
2
《手把手教你》系列技巧篇（十八）-java+ selenium自动化测试-元素定位大法之By css中卷（详细教程）
3
《手把手教你》系列技巧篇（十七）-java+ selenium自动化测试-元素定位大法之By css上卷（详细教程）
4
前端代码整洁与规范之CSS篇
5
《手把手教你》系列技巧篇（十九）-java+ selenium自动化测试-元素定位大法之By css下卷（详细教程）
6
Tailwind CSS如何在vue项目中使用
7
【前端设计】HTML+CSS+JavaScript基本特性
8
【掰开揉碎】详解 CSS3 Grid 布局
9
解密CSS单位：px、em、vh的区别与应用
10
CSS 中BFC是什么？