background-size:100% 100% 和 background-size:cover的区别简述
下面我通过给下图背景图添加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的区别简述的更多相关文章
- CSS background-size contain 与cover的区别
最近在重温CSS,发现好多东西都忘了,比如background-size属性中,contain与cover的区别. 菜鸟教程上是这么说的: 有点难理解,通俗解释就是:两者均以保持图像宽高比的形式缩放来 ...
- OC中 self.view.frame.size.height = 100; 不能通过编译的原因
在OC中,当需要修改一个view的尺寸时,通常是通过先将 self.view.fram赋值给一个临时变量,然后修改临时变量,最后将临时变量赋值给 self.view.frame.代码如下: // 1. ...
- [转载] 在java中为什么变量1000 = 1000 返回false,但是100=100返回true?
ps:题目的意思是指定义相同内容的不同变量之间的==比较.如果直接比较(100 == 100)的结果是true. 运行以下代码: Integer a = 1000, b = 1000; System. ...
- 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 ...
- Integer中1000==1000为false而100==100为true
查看Integer.java类,会发现有一个内部私有类,IntegerCache.java,它缓存了从-128到127之间的所有的整数对象.如果在这个区间内,他就会把变量当做一个变量,放到内存中:但如 ...
- background-size:100% 100% 时 background-position: % 失效
背景知识: background-size background-position 难题: background-size 为 100% 100% 时,background-position 部分失效 ...
- 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. ...
- 为什么 Java中1000==1000为false而100==100为true?AND "2+2=5"?
前提:我们知道,如果两个引用指向同一个对象,用==表示它们是相等的.如果两个引用指向不同的对象,用==表示它们是不相等的,即使它们的内容相同. 运行下面代码:
- 【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 ...
随机推荐
- elementui中的el-table中拼接两个列表字段
我们知道,在ElementUI中我们是使用下面的语法来展示列表字段的: <el-table :data="yanggbs" stripe style="width: ...
- C++ 类的static静态成员
静态static 静态成员的提出是为了解决数据共享的问题.实现共享有许多方法,如:设置全局性的变量或对象是一种方法.但是,全局变量或对象是有局限性的. 在全局变量前,加上关键字static该变量就被定 ...
- Docker是什么、为什么是一种趋势
Docker的思想来自于集装箱,集装箱解决了什么问题?在一艘大船上,可以把货物规整的摆放起来.并且各种各样的货物被集装箱标准化了,集装箱和集装箱之间不会互相影响.那么我就不需要专门运送水果的船和专门运 ...
- 适合初学者的Python爬取链家网教程
前言 文的文字及图片来源于网络,仅供学习.交流使用,不具有任何商业用途,版权归原作者所有,如有问题请及时联系我们以作处理. 作者: TinaLY PS:如有需要Python学习资料的小伙伴可以加点击下 ...
- struts2增删改查
1.导入相关的依赖:struts.自定义标签库 配置pom.xml <project xmlns="http://maven.apache.org/POM/4.0.0" xm ...
- PHP入门了解
1.五个基本概念 1.1静态页面和动态页面 静态页面:服务器不执行的页面 动态页面:服务器执行的页面 1.2客户端和服务器端 客户端:浏览器就是客户端 服务器端:给浏览者提供服务 1.3端 ...
- CAD画三维图怎么渲染?一分钟教你快速操作
从事过CAD相关工作的都知道,CAD绘制的方式有二维平面图以及三维图形,三维图形,画三维图方式也是比较简单的.那当然三维图画完后一般还需要进行渲染操作,步骤也是比较简洁的.下面就来给大家操作一下CAD ...
- Python—下载安装与使用
安装依赖包 首先安装gcc编译器,编译时需要使用gcc.gcc有些系统版本已经默认安装,通过 gcc --version 查看,没安装的先安装 [root@localhost ~]# yum -y ...
- layer重复弹出(layui弹层同时存在多个)的解决方法
layer.open() 同时存在多个;解决 layui 弹层 layer 同时存在多个页面层(iframe)的问题 这个问题其实是疏忽了一些 基础参数(仔细看文档,仔细看文档,仔细看文档) 一.ty ...
- class 命名规范(三)
抄自:https://www.jianshu.com/p/4945d9cf14e5 一.常见class关键词 布局类:header, footer, container, main, content, ...