下面我通过给下图背景图添加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. Have a look ^_^

    参考书籍: <重构 改善既有代码的设计 第2版>马丁 福勒著 人民邮电出版社 马丁 福勒的其他著作:<分析模式>,<UML精粹>,<领域特定语言> 目录 ...

  2. 数据库之MySQL与Python交互

    准备数据 创建数据表 -- 创建 "京东" 数据库 create database jing_dong charset=utf8; -- 使用 "京东" 数据库 ...

  3. MySQL（7）---存储过程

    Mysql(7)---存储过程 存储过程接下来会有三篇相关博客 第一篇存储过程常用语法. 第二篇存储过程中的游标. 第三篇单独讲一个实际开发过程中复杂的真实的案例. 一.概述 1.什么是存储过程 概述 ...

  4. go-客户信息关系系统

    客户信息关系系统 项目需求分析 1) 模拟实现基于文本界面的< 客户信息管理软件>. 2) 该软件能够实现对客户对象的插入.修改和删除(用切片实现),并能够打印客户明细表 项目的界面设计 ...

  5. Python制作动态二维码只需要一行代码！炒鸡简单！

    分享一个比较有意思的项目,只需要一行Python代码就可以快捷方便生成普通二维码.艺术二维码(黑白/彩色)和动态GIF二维码. 用法比较简单,直接通过pip安装即可. pip3 install myq ...

  6. 高效取余运算(n-1)&hash原理探讨

    Java的HashMap源码中用到的(n-1)&hash这样的运算,查找发现这是一种高效的求余数的办法,但其中的原理是什么呢为什么可以这么做呢? 先上结论:假设被除数是x,对于除数是2n的取余 ...

  7. LinuxShell脚本——函数

    LinuxShell脚本——函数 摘要:本文主要学习了Shell中函数的定义和使用. 函数的定义 Shell函数的本质是一段可以重复使用的脚本代码,这段代码被提前编写好了,放在了指定的位置,使用时直接 ...

  8. for与foreach区别

    首先说一下for循环: 格式:for( ; ; ){}; public static void main(String[] args) { List<String> arr = new A ...

  9. C++ message queue 消息队列入门

    说明:当我们有多个线程以不同的速度运行并且我们想要以特定的顺序从一个线程向另一个线程发送信息时,消息队列可能会有用. 这个想法是,发送线程将消息推送到队列中,而接收线程将消息按自己的步调弹出. 只要发 ...

  10. Python的 json 、 hashlib 、 Base64 模块

    json模块 简介 全称"JavaScript Object Notation" (JavaScript对象表示法)它是一种基于文本,独立于语言的轻量级数据交换格式 以易于让人阅读 ...