背景图片大小设置

  • 语法：background-size:宽度 高度；
  • 作用：设置背景图片大小
  • 取值：
取值 场景
数字+px 简单方便，常用
百分比 相当于当前盒子自身的宽高百分比
contain 包含，将背景图片等比例缩放，直到不会超出盒子的最大
cover 覆盖，将背景图片等比例缩放，直到刚好填满整个盒子没有空白

  • 1.设置一个盒子赋予宽（400px）高（300px），并设置边框便于观察，将原图插入盒子中
    设置背景图片大小的方法

  • 2.第一种取值（数字+px）：

    • 使用数字＋px 给图片设置和盒子一样的宽高
    • background-size: 400px 300px;
      设置背景图片大小的方法

  • 3.第二种取值（百分比）：

    • 使用百分比给图片设置宽高都为90%
    • background-size: 90% 90%;
      设置背景图片大小的方法

  • 4.第三种取值（contain）：

    • 使用 contain 将背景图片等比例缩放，直到不会超出盒子的最大
    • background-size: contain;
      设置背景图片大小的方法

  • 5.第四种取值（cover）：

    • 使用 cover 将背景图片等比例缩放，直到刚好填满整个盒子没有空白
    • background-size: cover;
      设置背景图片大小的方法
声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。