设置背景图片大小的方法

背景图片大小设置

  • 语法:background-size:宽度 高度;
  • 作用:设置背景图片大小
  • 取值:
取值 场景
数字+px 简单方便,常用
百分比 相当于当前盒子自身的宽高百分比
contain 包含,将背景图片等比例缩放,直到不会超出盒子的最大
cover 覆盖,将背景图片等比例缩放,直到刚好填满整个盒子没有空白
  • 1.设置一个盒子赋予宽(400px)高(300px),并设置边框便于观察,将原图插入盒子中
    设置背景图片大小的方法_第1张图片

  • 2.第一种取值(数字+px):

    • 使用数字+px 给图片设置和盒子一样的宽高
    • background-size: 400px 300px;
      设置背景图片大小的方法_第2张图片
  • 3.第二种取值(百分比):

    • 使用百分比给图片设置宽高都为90%
    • background-size: 90% 90%;
      设置背景图片大小的方法_第3张图片
  • 4.第三种取值(contain):

    • 使用 contain 将背景图片等比例缩放,直到不会超出盒子的最大
    • background-size: contain;
      设置背景图片大小的方法_第4张图片
  • 5.第四种取值(cover):

    • 使用 cover 将背景图片等比例缩放,直到刚好填满整个盒子没有空白
    • background-size: cover;
      设置背景图片大小的方法_第5张图片

你可能感兴趣的:(CSS,css,前端)