下面我通过给下图背景图添加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. 使用requests模块进行封装，帮你如何处理restful类型的接口

    import requests import urllib3 urllib3.disable_warnings(urllib3.exceptions.InsecureRequestWarning) c ...

  2. Windows Store无法联网时安装WSL

    Windows Store无法联网时安装WSL 1 打开powershell 输入命令: Invoke-WebRequest -Uri https://aka.ms/wsl-ubuntu-1604 - ...

  3. 框架基础：深入理解Java注解类型(@Annotation)

    注解的概念 注解的官方定义 首先看看官方对注解的描述: An annotation is a form of metadata, that can be added to Java source co ...

  4. java主函数

    相信很多初次接触java的同学,在遇见主函数的时候,听到最多的就是主函数的格式是固定的,不能进行修改等等.这就让人疑惑了,主函数为啥就那么特殊呢?接下来博主会为大家解释主函数.大家先看看下面这个程序: ...

  5. 官宣：腾讯WeTest明星工具-PerfDog面向全球发布！

    导读 PerfDog(官网:perfdog.qq.com)作为移动全平台性能测试分析专业工具,在腾讯内部研发测试工具商店-WeTest Store上线后服务了近2000+名开发者,其中<王者荣耀 ...

  6. MySQL Linux环境的安装配置

    在Kali中已经内置了MySQL(镜像可以从mysql.com/downloads/ 下载安装) 奇怪的是博主我的kali内置的是mariaDB数据库,所以我也懒得弄MySQL了!直接mariaDB吧 ...

  7. if语句，if...else语句的分析

    if语句的反汇编判断 if语句的反汇编判断基本是围绕JCC指令的,如果想要有深刻的理解,可以自行练习JCC指令 执行各类影响标志位的指令 jxx xxxx 1.案例一 mov eax,dword pt ...

  8. HOW TO: Setting up Encrypted Communications Channels in Oracle Databas

    access_timeSeptember 22, 2015 person_outlineMartin Rakhmanov share In this article, I will explain h ...

  9. 01day-webpack

    <!-- .sass后缀的文件名 比较老了 现在它的后缀名是.scss 其实他们是同一个东西 只是 后缀名发生了变化 以 .sass写的文件的内容是 他没有括号 没有分号 有点怪 它跟新为了.s ...

  10. 2019.6.11_MySQL进阶一：索引

    所谓索引就是为特定的mysql字段进行一些特定的算法排序,比如二叉树的算法和哈希算法,哈希算法是通过建立特征值,然后根据特征值来快速查找.MySQL索引的建立对于MySQL的高效运行是很重要的,索引可 ...