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 ...
随机推荐
- ajax之cache血与泪~~
场景:项目以ie5渲染页面,点击导出列表数据(Excel形式),点击导出发送get请求,后台生成Excel文件,返回文件地址信息 异常:ie第一次返回的信息正常,之后返回的都是第一次的结果,googl ...
- RHEL5 yum更新源
1.检查yum是否安装 rpm -qa |grep yum 2.利用CentOS的yum更新源来实现RHEL5的YUM功能 vi /etc/yum.repos.d/CentOS-Base.repo [ ...
- Burp Post、Get数据包转为上传multipart/form-data格式数据包
方法一: 新建一个网页进行上传,代码代码如下: <html> <head></head> <body> <form method="po ...
- python --help查询python相关命令
C:\Users\lenovo>python --help usage: python [option] ... [-c cmd | -m mod | file | -] [arg] ... O ...
- OBS显示器获取显示黑色没有图像
- Python调用7zip命令实现文件批量解压
Python调用7zip命令实现文件批量解压 1.输入压缩文件所在的路径 2.可以在代码中修改解压到的文件路径和所需要解压的类型,列入,解压文件夹下面所有的mp4格式的文件 3.cmd 指的就是Pyt ...
- this关键字制定对象的属性
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 目前学习.net时间让我摸不着头脑的事情
呜呜,不太喜欢做笔记,只喜欢把自己不懂的和预习时间有麻烦的简单记下,所以这里也是能可以让我写下我们的学习点滴··· 今天学习了<1>.变量的作用域,在想是不是之前听过的局部变量和全局变量? ...
- javascript实现的网页打印
打印全部页面: <body onload="javascript:window.print()"> 实现局部打印,可以将不参加打印的元素设置“display=none” ...
- 《转载》Tomcat内存设置详解
原文地址:Java内存溢出详解 一.常见的Java内存溢出有以下三种: 1. java.lang.OutOfMemoryError: Java heap space ----JVM Heap(堆)溢出 ...