background-size:100% 100% 时 background-position: % 失效
背景知识:
background-size
background-position
难题:
background-size
为 100% 100% 时,background-position
部分失效;
示例
<div class="content">content</div>
.content {
width: 200px;
height: 200px;
background-color: pink;
background-image: url('https://xianshenglu.github.io/css/img-displayed/frosted-glass-tiger.jpg');
background-position: 10% 10%;
background-size: 100% 100%;
background-repeat: no-repeat;
}
效果如图:
从图中可以看出:
background-size
为 100% 100% 时,background-position
通过 % 来调整时是无效的;
如果要调整,也不是没有办法,这里先说为什么 % 调整无效,看文档 background-position
:
<percentage> <percentage>
With a value pair of '0% 0%', the upper left corner of the image is aligned with the upper left corner of the box's padding edge. A value pair of '100% 100%' places the lower right corner of the image in the lower right corner of padding area. With a value pair of '14% 84%', the point 14% across and 84% down the image is to be placed at the point 14% across and 84% down the padding area.
简而言之:0% 0% 是把背景左上角与盒模型左上角对齐,100% 100% 是把背景右下角与盒模型右下角对齐,其他的%在上下限里调整;
这意味着,规范规定了%作用的上下限,且用法和其他属性的%不同。在这里,background-size
为100% 100% ,实际上,同时满足了上限和下限,所以background-position
等于失去了作用,这里无效也就可以理解了。
方案
然而,这并不意味着,在这种情况下,我们就无法调整背景的位置了,可以不用 % 用 px 等 length
,效果如图:
当然,这种做法的局限也比较明显,不能自适应。
background-size:100% 100% 时 background-position: % 失效的更多相关文章
- OC中 self.view.frame.size.height = 100; 不能通过编译的原因
在OC中,当需要修改一个view的尺寸时,通常是通过先将 self.view.fram赋值给一个临时变量,然后修改临时变量,最后将临时变量赋值给 self.view.frame.代码如下: // 1. ...
- 题目:企业发放的奖金根据利润提成。 利润(I)低于或等于10万元时,奖金可提10%; 利润高于10万元,低于20万元时,低于10万元的部分按10%提成,高于10万元的部分,可可提成7.5%; 20万到40万之间时,高于20万元的部分,可提成5%; 40万到60万之间时高于40万元的部分,可提成 3%; 60万到100万之间时,高于60万元的部分,可提成1.5%; 高于100万元时,超过
题目:企业发放的奖金根据利润提成. 利润(I)低于或等于10万元时,奖金可提10%: 利润高于10万元,低于20万元时,低于10万元的部分按10%提成,高于10万元的部分,可可提成7.5%: 20万到 ...
- 代码实现:企业发放的奖金根据利润提成。利润(I)低于或等于10万元时,奖金可提10%; 利润高于10万元,低于20万元时,低于10万元的部分按10%提成,高于10万元的部分,可可提成7.5%; 20万到40万之间时,高于20万元的部分,可提成5%;40万到60万之间时高于40万元的部分,可提成3%; 60万到100万之间时,高于60万元的部分,可提成1.5%,高于100万元时,超过100万元
import java.util.Scanner; /* 企业发放的奖金根据利润提成.利润(I)低于或等于10万元时,奖金可提10%: 利润高于10万元,低于20万元时,低于10万元的部分按10%提成 ...
- [转载] 在java中为什么变量1000 = 1000 返回false,但是100=100返回true?
ps:题目的意思是指定义相同内容的不同变量之间的==比较.如果直接比较(100 == 100)的结果是true. 运行以下代码: Integer a = 1000, b = 1000; System. ...
- 为什么 Java中1000==1000为false而100==100为true?AND "2+2=5"?
前提:我们知道,如果两个引用指向同一个对象,用==表示它们是相等的.如果两个引用指向不同的对象,用==表示它们是不相等的,即使它们的内容相同. 运行下面代码:
- Integer中1000==1000为false而100==100为true
查看Integer.java类,会发现有一个内部私有类,IntegerCache.java,它缓存了从-128到127之间的所有的整数对象.如果在这个区间内,他就会把变量当做一个变量,放到内存中:但如 ...
- 使用cmd时cd命令失效
使用cmd时cd命令失效 近日使用cmd时总是出现无法cd到指定目录的情况 如下图所示 输入cd命令后依旧停留在原始路径 解决方法: 输入 cd D:\CE-5\Training_Sanple\n ...
- 【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 ...
- ValueError: Error when checking input: expected input_1 to have 2 dimensions, but got array with shape (100, 100, 100, 3)
报错 Traceback (most recent call last): File "D:/PyCharm 5.0.3/WorkSpace/3.Keras/1.Sequential与Mod ...
随机推荐
- css3-rem
http://www.w3cplus.com/css3/define-font-size-with-css3-rem https://mp.weixin.qq.com/s/DpLXJhfCHsgrbg ...
- Images.xcassets 的简单使用
总结起来Images.xcassets 就这么几句话 (1)以下開始简单整理 进入images.xcassets 右键--->New Image Set 或者点XCode的images.xcas ...
- InsertSql
declare @hobby table(hobbyID int,hName nvarchar(100));insert into @hobby(hobbyID,hName)Select 1,'爬山' ...
- 在vue中优雅的使用LocalStrong
h5的LocalStrong帮我们缓存一些数据到本地,最常用的使用场景,比如京东购物在未登陆的状态下,把商品加入购物车,收藏某个商品.当我们把url复制到另外一个浏览器,购物车就是空的. 以下是一个简 ...
- 【GIS】Cesium回到初始位置
var boundingSphere = new Cesium.BoundingSphere(Cesium.Cartesian3.fromDegrees(116.4, 39.9, 100), 15 ...
- Python 管理 MySQL
Python MySQLdb 模块 Python pymysql 模块 Python SQLAlchemy 模块 Python ConfigParser 模块 Python 创建 MySQL 配置文件 ...
- Visual C++中去除警告
在编程中,编译器警告的意思是提问程序员:如果这样做将会出现意外的错误,你确定要这样做吗? 在很多情况下,我们写程序的时候会出现一些警告,而这些警告我们都知道这样做的确是需要的并且程序中多处出现这种做法 ...
- jQuery mobile 初始化页面的过程
- Message Queue
RabbitMQ 是使用Erlang编写的一个开源的消息队列,本身支持很多的协议:AMQP,XMPP, SMTP, STOMP,也正是如此,使的它变的非常重量级,更适合于企业级的开发.同时实现了一个经 ...
- Struts2之web元素访问与模板包含与默认Action使用
上一篇为大家介绍了如何使用Action进行参数接收,以及简单的表单验证,本篇为大家介绍一下关于Action访问web元素的三种方式(request.session.application):模板包含( ...