下面我通过给下图背景图添加background-size属性的不同属性值，更直观的显示出100%和cover的区别

　　 

　　下图是添加background-size:100% 100% 后的背景图效果，背景图被拉伸后有点失真

　　

　　下图是添加background-size: cover 后的背景图效果，背景图被拉伸后背景图不能全部显示

　　

　　它们的区别：

　　　　background-size:100% 100%把背景图进行横向和纵向的拉伸，图片比例随之改变，

　　　　可能导致图像失真（建议让UI给原始背景图，否则容易出现图片拉伸后失真）

　　　　background-size: cover把背景图扩展至足够大，直至完全覆盖背景区域，

　　　　图片比例保持不变且不会失真，但某些部分被切割无法显示完整背景图像

　　原文链接：https://blog.csdn.net/wzj2584454/article/details/78100233

background-size:100% 100% 和 background-size:cover的区别简述的更多相关文章

  1. CSS background-size contain 与cover的区别

    最近在重温CSS,发现好多东西都忘了,比如background-size属性中,contain与cover的区别. 菜鸟教程上是这么说的: 有点难理解,通俗解释就是:两者均以保持图像宽高比的形式缩放来 ...

  2. OC中 self.view.frame.size.height = 100; 不能通过编译的原因

    在OC中,当需要修改一个view的尺寸时,通常是通过先将 self.view.fram赋值给一个临时变量,然后修改临时变量,最后将临时变量赋值给 self.view.frame.代码如下: // 1. ...

  3. [转载] 在java中为什么变量1000 = 1000 返回false，但是100=100返回true？

    ps:题目的意思是指定义相同内容的不同变量之间的==比较.如果直接比较(100 == 100)的结果是true. 运行以下代码: Integer a = 1000, b = 1000; System. ...

  4. ORA-27092: size of file exceeds file size limit of the process

    停数据库时遇到下述问题: $ ./addbctl.sh stop You are running addbctl.sh version 120.1 Shutting down database UAT ...

  5. Integer中1000==1000为false而100==100为true

    查看Integer.java类,会发现有一个内部私有类,IntegerCache.java,它缓存了从-128到127之间的所有的整数对象.如果在这个区间内,他就会把变量当做一个变量,放到内存中:但如 ...

  6. background-size:100% 100% 时 background-position: % 失效

    背景知识: background-size background-position 难题: background-size 为 100% 100% 时,background-position 部分失效 ...

  7. Limits on Table Column Count and Row Size Databases and Tables Table Size 最大行数

    MySQL :: MySQL 8.0 Reference Manual :: C.10.4 Limits on Table Column Count and Row Size https://dev. ...

  8. 为什么 Java中1000==1000为false而100==100为true？AND "2+2=5"？

    前提:我们知道,如果两个引用指向同一个对象,用==表示它们是相等的.如果两个引用指向不同的对象,用==表示它们是不相等的,即使它们的内容相同. 运行下面代码:

  9. 【Todo】Java学习笔记 100==100 & Reflection API & Optional类详解 & DIP、IoC、DI & token/cookie/session管理会话方式

    为什么1000 == 1000返回为False,而100 == 100会返回为True?   Link Java Reflection API:Link Java8 Optional 类深度解析: L ...

随机推荐

  1. 【计算机网络】如何让Ajax通信过程携带Cookie呢？

    Ajax 1. 介绍一下ajax并代码实现 1.1 基本概念 JavaScript 和XML(Asynchronous JavaScript And XML).简单点说,就是使用 XMLHttpReq ...

  2. WPF 使用EventTrigger时设置SouceName技巧

    使用情节触发器时,如果有触发源/触发源控件时可以将情节触发器放置最顶级的面板控件的触发器中. 通过blend这个神器真的是可以学到不少东西. 代码: //情节动画放置于顶级控制面板 <Widno ...

  3. 什么是SFP光模块？

    什么是光模块? 光模块(optical module)由光电子器件.功能电路和光接口等组成,光电子器件包括发射和接收两部分.简单的说,光模块的作用就是光电转换,发送端把电信号转换成光信号,通过光纤传送 ...

  4. crm-3权限

    1.权限基本实现 rbac: rbac基于角色的权限控制 ,权限本质就是url 权限表: url列表 角色表: 一个角色固定访问一些url的地址 用户表: 用户可以绑定角色 ,用户拥有了角色的权限 生 ...

  5. export default和export的使用

    export default和export都是用来向外暴露成员 export default 向外暴露的成员可以使用任意的变量来接收,在一个模块中,export default只允许向外暴露一次,可以 ...

  6. input监听回车

    1.el-input 2.强制监听

  7. [b0025] vmware_桥接网路设置

    总结: 桥接 模式上外网比较简单. 缺点是每次重启虚拟机,分配的IP可能变化,导致 xshell  连接 时都要修改,很麻烦 桥接模式能不能配置静态IP  ? 1. 环境 物理机网络 情况,从外部自动 ...

  8. logistic regression评价方法

    1.sensitivity,也叫recall,true positive rate,含义是预测为正向的case中对的(true positive)和所有事实为正向的case的比例. 2.specifi ...

  9. 9-SQL视图

    (1) 如何创建,更新和删除视图         视图作为一张虚拟表,帮我们封装了底层与数据表的接口.它相当于是一张表或多张表的数据结果集.视图的这一特点,可以帮我们简化复杂的 SQL 查询,比如在编 ...

  10. vue调用高德地图：vue-amap

    前言:之前没有接触过页面调用地图的项目,某次面试,老板要求我用vue-amap调用高德地图,回家以后,我去网上查了一些案例和教程,看似很简单的引入调用,我却整整弄了一宿,还没弄出来!!!百般无奈之下, ...