首页 前端知识 设置背景图片大小的方法

设置背景图片大小的方法

2024-01-28 12:01:16 前端知识 前端哥 581 480 我要收藏

背景图片大小设置

  • 语法: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;
      在这里插入图片描述
转载请注明出处或者链接地址:https://www.qianduange.cn//article/604.html
标签
评论
发布的文章
大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!