EnlightenCode

background-size一个100%和两个100%的区别 🎨 ​

基本概念 📝 ​

background-size 是CSS中用于设置背景图片大小的重要属性。它可以接受一个或两个值：

  • 第一个值：控制图片在x轴（宽度）方向的缩放
  • 第二个值：控制图片在y轴（高度）方向的缩放

值的类型 ⚙️ ​

可以使用以下几种类型的值：

  • 百分比（%）
  • 具体像素值（px）
  • auto
  • contain
  • cover

一个值 vs 两个值 🔄 ​

一个值的情况 - background-size: 100% ​

  • 只设置宽度（x轴）为100%
  • 高度（y轴）自动设置为 auto
  • 图片会保持原始宽高比
  • 可能会出现背景图片无法完全覆盖容器的情况

两个值的情况 - background-size: 100% 100% ​

  • 宽度和高度都被强制设置为100%
  • 图片会被拉伸以完全填充容器
  • 可能会导致图片比例失真

实际示例 💡 ​

假设有以下场景：

  • 原始图片比例为 5:2
  • 容器比例为 2:1
css
.container-1 {
    background-image: url('example.jpg');
    background-size: 100%; /* 保持图片原比例 */
}
.container-2 {
    background-image: url('example.jpg');
    background-size: 100% 100%; /* 强制拉伸填充 */
}

最佳实践建议 ✨ ​

  1. 当需要保持图片原始比例时：

    • 使用 background-size: 100% 或
    • 使用 background-size: contain

  2. 当需要完全覆盖容器时：

    • 优先使用 background-size: cover（比 100% 100% 更智能）
    • 只有在特殊情况下才使用 background-size: 100% 100%

  3. 响应式设计考虑：

    • 配合 background-position 使用
    • 考虑使用 @media 查询适配不同屏幕

注意事项 ⚠️ ​

  • 使用 100% 100% 可能导致图片失真
  • 单个 100% 可能导致容器出现空白
  • 考虑使用现代的 object-fit 属性作为替代方案
  • 注意浏览器兼容性问题

浏览器兼容性 🌐 ​

  • 现代浏览器都很好地支持 background-size
  • IE9+支持此属性
  • 对于老版本浏览器，建议提供回退方案