语法：background-size: auto || <length> || <percentage> || cover || contain

取值说明：

1.auto:此值为默认值，保持背景图片的原始高度和宽度

2.<length>此值设置具体的值，可以改变背景图片的大小

3.<percentage>此值为百分值，可以是0％〜100％之间任何值，但此值只能应用在块元素上，所设置的百分值将使背景图片的大小根据所在元素的宽度的百分比来计算

4.cover：此值是将图片放大，以适合铺满整个容器，这个主要运用在，当图片小于容器时，又无法使用background-repeat来实现时，我们就可以采用cover;将背景图片放大到适合容器的大小，但这种方法会使用背景图片失真

5.contain:此值刚好与cover相反，其主要是将背景图片缩小，以适合铺满整个容器，这个主要运用在，当背景图片大于元素容器时，而又需要将背景图片全部显示出来，此时我们就可以使用contain将图片缩小到适合容器大小为止，这种方法同样会使用图片失真

注：当background-size取值为和<percentage>时可以设置两个值，也可以设置一个值，当只取一个值时，第二个值相当于auto，但这里的auto并不会使背景图片的高度保持自己原始高度，而会与第一个值相同

实例：

随便找张图片(50px*50px)来当作背景图片使用

DEMO1:auto

我来看第一个DEMO,在前面的DEMO上加上和个class名为”backgroundSizeAuto”,在这个Demo上我们应用上前面所示的背景，并把background-size取值为auto

DEMO2:length

DEMO3:percentage

DEMO4:cover

DEMO5:contain

DEＭＯ三中的cover是把背景图片放大到适合元素容器的尺寸，这时的contain刚好是跟cover相反，是把背景图片缩小到适合元素容器的尺寸

总结：从上面的几个DEMO效果可以看出，只有当background-size值为auto时，背景图片才不会变形失真，而其他值都会造成背景图片变形夫真，所以大家使用时需要仔细考虑好，以免给你的制作带来不良效果

CSS之background-size属性相关推荐

  1. 【前端小点】CSS之background背景属性详解

    本篇文章我们将一起展开来看css的background背景属性. 一.结构 创建DIV <div class="div1">1 </div> 样式 widt ...

  2. 【CSS】background相关属性深入学习

    最近一次需求中对于background相关的一些属性使用较多,总结下,希望提高下次的开发效率 background属性 background-color background-image backgr ...

  3. css中background的属性

    background-size: contain;/* background-size: 100px 100px; */ 1.background-color:设置盒子的背景颜色: backgroun ...

  4. css中文本指什么,CSS中的文本属性

    本文总结一下CSS中关于文字的相关属性,最后给出实例. CSS基础文字属性 文字的基础属性主要包括:字体.颜色和文本.除去颜色color的属性外,字体和文本的相关属性可以权威参考: CSS 文本属性( ...

  5. CSS: div高度自动适应背景图片的高度 How to get div height to auto-adjust to background size?...

    原文:CSS: div高度自动适应背景图片的高度 How to get div height to auto-adjust to background size? 其实方法非常简单,直接写代码: &l ...

  6. （15）css常用样式—background背景属性

    一.背景属性概述 CSS 中除了布局类属性,还需要添加一些背景类的内容进行页面的修 饰,从而让网页变得更加的美观. CSS 中通过 background 属性来设置背景,它是一个综合属性,可以拆分成多 ...

  7. css与背景相关的属性有哪些,css的背景background的相关属性

    今天需要做一个占满设备宽度的轮播图,这里作为demo仅展示一张图,下面分别是要操作的图片(这里做了缩放处理,实际的图比较大),以及要实现的效果图,很明显两者是不成比例的:      (图一)   (图 ...

  8. html图片背景属性,css 背景(background)属性、背景图定位

    background属性: Background属性是css中应用比较多,且比较重要的一个属性,它是负责给盒子设置背景图上和背景颜色的,background是一个复合属性,它可以分解成如下几个设置项: ...

  9. css语言中选项是背景图像的属性,HTML_学习CSS的背景图像属性background，CSS的背景属性“background”提供 - phpStudy...

    学习CSS的背景图像属性background CSS的背景属性"background"提供了众多属性值,如颜色.图像.定位等,为网页背景图像的定义提供了极大的便利.看看backgr ...

  10. CSS——background系列属性

    关于颜色 能够用英语单词来表述的颜色都是简单的颜色 用rgb方法来表示: 光学显示器每个像素都是由三原色的发光原件组成的,靠明亮度不同调成不同颜色. 用逗号隔开, r, g, b的值,每个值的取值范围 ...

最新文章

  1. 信息增益有负值吗_一个自动化设备的信息化改造项目，谈谈自动化工程师转型之路—IT融合OT...
  2. OpenStack-MitakaCentos7.2双节点搭建--（三）Glance（镜像服务）
  3. Linux常用软件和安装方法,Linux软件安装与卸载常用方法（转）
  4. 微信jssdk 图片上传 JAVA_微信jssdk图片上传
  5. 盒马mini带客流，老菜场攒烟火气，新老菜场交融相映成辉
  6. LintCode 402: Continuous Subarray Sum
  7. PAT_B_1004_Java(20分)
  8. 第十章 內核同步的方法
  9. linux编码合适修改_CentOS升级Linux内核备忘录
  10. 个性签名html,经典个性签名-2021最新QQ经典-QQ经典个性签名-腾牛个性网
  11. APP开发的七大阶段，你了解多少？
  12. 【计算机网络】透明网桥：逆向学习算法逐步建立转发表（例题详细解析）
  13. QQ VS 360事件全部经过！-----现实生活中的MBA经典案例！
  14. python爬虫爬取必应壁纸
  15. day06 Elasticsearch搜索引擎2
  16. 【系统集成项目管理工程师】信息与信息化
  17. 多益网络2013校园招聘第二轮笔试题目
  18. carplay是否可以用安卓系统_carplay能连接安卓手机吗
  19. 什么是跨职能流程图? Cross-Functional / Swimlane Flowchart
  20. 私钥，公钥，钱包地址，助记词，keyStore的区别

热门文章

  1. mysql 循环创建列_mysql – 查询列中的循环值
  2. 打印速度快点的打印机_SLM推出了功能强大的新型金属3D打印机，速度快20倍
  3. php 动态生成文件,php动态程序生成静态文件示例
  4. python 字符串交集_Python序列--集合（set）
  5. java customerservlet_顾客管理系统java+servlet
  6. php修改session生存时间,修改session的过期(生存)时间
  7. 【51单片机快速入门指南】5.3：SPI控制晶联讯JLX12864G_08602 LCD屏幕
  8. 求一个正整数是哪几个正整数相加的和,这些数不能相同
  9. 安卓USB开发教程 四 安卓 AOA
  10. 前端学习（3238）：react生命周期4