下面我通过给下图背景图添加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. elementui中的el-table中拼接两个列表字段

    我们知道,在ElementUI中我们是使用下面的语法来展示列表字段的: <el-table :data="yanggbs" stripe style="width: ...

  2. C++ 类的static静态成员

    静态static 静态成员的提出是为了解决数据共享的问题.实现共享有许多方法,如:设置全局性的变量或对象是一种方法.但是,全局变量或对象是有局限性的. 在全局变量前,加上关键字static该变量就被定 ...

  3. Docker是什么、为什么是一种趋势

    Docker的思想来自于集装箱,集装箱解决了什么问题?在一艘大船上,可以把货物规整的摆放起来.并且各种各样的货物被集装箱标准化了,集装箱和集装箱之间不会互相影响.那么我就不需要专门运送水果的船和专门运 ...

  4. 适合初学者的Python爬取链家网教程

    前言 文的文字及图片来源于网络,仅供学习.交流使用,不具有任何商业用途,版权归原作者所有,如有问题请及时联系我们以作处理. 作者: TinaLY PS:如有需要Python学习资料的小伙伴可以加点击下 ...

  5. struts2增删改查

    1.导入相关的依赖:struts.自定义标签库 配置pom.xml <project xmlns="http://maven.apache.org/POM/4.0.0" xm ...

  6. PHP入门了解

    1.五个基本概念     1.1静态页面和动态页面 静态页面:服务器不执行的页面 动态页面:服务器执行的页面  1.2客户端和服务器端 客户端:浏览器就是客户端 服务器端:给浏览者提供服务  1.3端 ...

  7. CAD画三维图怎么渲染?一分钟教你快速操作

    从事过CAD相关工作的都知道,CAD绘制的方式有二维平面图以及三维图形,三维图形,画三维图方式也是比较简单的.那当然三维图画完后一般还需要进行渲染操作,步骤也是比较简洁的.下面就来给大家操作一下CAD ...

  8. Python—下载安装与使用

    安装依赖包 首先安装gcc编译器,编译时需要使用gcc.gcc有些系统版本已经默认安装,通过  gcc --version  查看,没安装的先安装 [root@localhost ~]# yum -y ...

  9. layer重复弹出(layui弹层同时存在多个)的解决方法

    layer.open() 同时存在多个;解决 layui 弹层 layer 同时存在多个页面层(iframe)的问题 这个问题其实是疏忽了一些 基础参数(仔细看文档,仔细看文档,仔细看文档) 一.ty ...

  10. class 命名规范(三)

    抄自:https://www.jianshu.com/p/4945d9cf14e5 一.常见class关键词 布局类:header, footer, container, main, content, ...