当前位置: 首页 > news >正文

30. background-size 有哪些属性

总结

  1. cover | contain | 百分比 | 长宽 | auto

一、作用说明

background-size 是 CSS 中用于控制背景图片尺寸的属性,可以灵活设置背景图的宽高,以适应不同的容器大小。


二、语法

background-size: auto | length | percentage | cover | contain;

三、可选值说明

描述示例
auto默认值,保持图片原始尺寸background-size: auto;
length指定具体的宽高(如 px、em)background-size: 200px 100px;
percentage百分比,相对于容器的宽高background-size: 50% 50%;
cover等比例缩放图片,完全覆盖容器,可能裁剪图片background-size: cover;
contain等比例缩放图片,完整显示在容器内,可能留白background-size: contain;

四、详细说明

1. auto
  • 默认值,背景图保持原始大小。
  • 若只设置一个值(如 background-size: 200px),第二个值自动为 auto,保持图片比例。
2. length
  • 使用固定值设置背景图大小。
  • 可设置一个或两个值,分别表示宽和高:
background-size: 100px; /* 宽 100px,高 auto */
background-size: 200px 100px; /* 宽 200px,高 100px */
3. percentage
  • 百分比基于容器的宽度和高度。
  • 若容器宽高为 300px x 200px,设置 background-size: 50% 50%,则背景图会显示为 150px x 100px
background-size: 100% 100%; /* 背景图拉伸填满整个容器,可能变形 */
4. cover
  • 等比例缩放背景图,确保图片完全覆盖容器
  • 若图片比例与容器不一致,图片可能会被裁剪。
background-size: cover;

✅ 常用于全屏背景图、轮播图等场景。

5. contain
  • 等比例缩放背景图,确保图片完整显示在容器内
  • 若容器比例与图片不一致,容器可能会留白。
background-size: contain;

✅ 常用于图标、LOGO 等需要完整展示的场景。


四、示例代码

HTML:
<div class="box"></div>
CSS:
.box {width: 300px;height: 200px;background-image: url("image.jpg");background-repeat: no-repeat;background-position: center;border: 1px solid #ccc;
}
不同 background-size 效果:
/* 默认 auto */
background-size: auto;/* 固定大小 */
background-size: 200px 150px;/* 百分比 */
background-size: 50% 50%;/* 完全覆盖 */
background-size: cover;/* 完整显示 */
background-size: contain;

五、应用场景

场景推荐值
全屏背景图cover
图标展示contain
自定义背景大小length
响应式背景图covercontain
背景图拉伸填充100% 100%(注意变形)

六、注意事项

注意点说明
covercontain 都是等比缩放不会破坏图片比例
使用 100% 100% 可能导致图片变形若容器与图片比例不一致
不影响布局background-size 不会影响元素本身的宽高
可用于响应式设计配合媒体查询使用,适配不同设备

http://www.dtcms.com/a/308225.html

相关文章:

  • IO流专题
  • socket编程-UDP(1)-设计echo server进行接口使用
  • FPGA实现AD9361采集转SRIO与DSP交互,FPGA+DSP多核异构信号处理架构,提供2套工程源码和技术支持
  • 【12】大恒相机SDK C#开发 ——多相机开发,枚举所有相机,并按配置文件中的相机顺序 将所有相机加入设备列表,以便于对每个指定的相机操作
  • 存储学习笔记
  • CSS选择器常用语法
  • day24作业
  • 《Linux自动化运维三例:磁盘告警、服务守护与网络检测》​
  • Mysql超详细安装配置教程(详细图文,保姆级)
  • 掩码语言模型(MLM)技术解析:理论基础、演进脉络与应用创新
  • 【Prompt集合】一个学习英文单词更好的提示词
  • 从姑苏区人工智能大模型基础设施招标|学习服务器、AI处理器、GPU
  • 数据结构 ArrayList与顺序表
  • 机器学习——互信息(超详细)
  • 【物联网】基于树莓派的物联网开发【19】——树莓派搭建MQTT客户端及MQTTX使用
  • Vision Transformer(ViT)模型实例化PyTorch逐行实现
  • 从 MySQL 迁移到 TiDB:使用 SQL-Replay 工具进行真实线上流量回放测试 SOP
  • SpringBoot3.x入门到精通系列:1.2 开发环境搭建
  • 25-vue-photo-preview的使用及使用过程中的问题解决方案
  • 实战教程 ---- Nginx结合Lua实现WAF拦截并可视化配置教程框架
  • 走进computed,了解computed的前世今生
  • 【云故事探索】NO.16:阿里云弹性计算加速精准学 AI 教育普惠落地
  • 谁在托举Agent?阿里云抢滩Agent Infra新赛道
  • 安装 docker compose v2版 笔记250731
  • 对接八大应用渠道
  • Tomcat,WebLogic等中间件漏洞实战解析
  • 大模型流式长链接场景下 k8s 优雅退出 JAVA
  • 用 MyBatis + MySQL 实现高效的批量 Upsert
  • 关于tresos Studio(EB)的MCAL配置之GtmCfg
  • 性能测试篇 :Jmeter监控服务器性能