background-size用于控制背景图尺寸，可设cover（覆盖裁剪）或contain（完整显示），支持像素、百分比等值，常用于响应式设计。
在CSS中，background-size 属性用于控制背景图片的尺寸。通过它，你可以让背景图适应容器大小、保持比例拉伸，或进行裁剪显示。这个属性对响应式设计特别有用。
基本语法
background-size 可以接受一个或两个值：
如果提供一个值，表示宽度，高度自动为 “auto” 如果提供两个值，第一个是宽度，第二个是高度
常用取值方式
1. 关键字：cover 和 contain
cover： 背景图等比缩放，完全覆盖容器。可能会有部分图片被裁剪。 contain： 背景图等比缩放，完整显示在容器内。可能会留白。
示例：
立即学习“前端免费学习笔记（深入）”；
div { background-image: url('image.jpg'); background-size: cover; background-position: center; height: 300px;}
这常用于全屏背景图，确保图片填满整个区域。
Waymark
Waymark是一个视频制作工具，帮助企业快速轻松地制作高影响力的广告。
79 查看详情
2. 具体尺寸：像素、百分比、rem 等
固定尺寸： background-size: 200px 150px; —— 设置具体宽高 百分比： background-size: 50% 100%; —— 相对于容器的尺寸
注意：百分比是相对于元素的背景定位区域（通常是 padding box）。
3. auto 值
background-size: auto; —— 使用图片原始尺寸 background-size: 100px auto; —— 宽度设为100px，高度按比例调整
实用技巧
响应式背景图： 用 cover 或 100% 100% 配合 background-position:center 实现居中填充 图标适配： 在小图标上使用精确像素值，如 background-size: 16px 16px; 避免变形： 尽量使用 cover、contain 或保持一个方向为 auto 来维持图片比例
基本上就这些。合理使用 background-size 能让你的背景图在各种设备上都表现良好。不复杂但容易忽略细节。
以上就是在css中如何用background-size控制背景的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1003034.html
微信扫一扫 
支付宝扫一扫 
