背景知识:

background-size 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-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: % 失效的更多相关文章

  1. OC中 self.view.frame.size.height = 100; 不能通过编译的原因

    在OC中,当需要修改一个view的尺寸时,通常是通过先将 self.view.fram赋值给一个临时变量,然后修改临时变量,最后将临时变量赋值给 self.view.frame.代码如下: // 1. ...

  2. 题目:企业发放的奖金根据利润提成。 利润(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万到 ...

  3. 代码实现:企业发放的奖金根据利润提成。利润(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%提成 ...

  4. [转载] 在java中为什么变量1000 = 1000 返回false,但是100=100返回true?

    ps:题目的意思是指定义相同内容的不同变量之间的==比较.如果直接比较(100 == 100)的结果是true. 运行以下代码: Integer a = 1000, b = 1000; System. ...

  5. 为什么 Java中1000==1000为false而100==100为true?AND "2+2=5"?

    前提:我们知道,如果两个引用指向同一个对象,用==表示它们是相等的.如果两个引用指向不同的对象,用==表示它们是不相等的,即使它们的内容相同. 运行下面代码:

  6. Integer中1000==1000为false而100==100为true

    查看Integer.java类,会发现有一个内部私有类,IntegerCache.java,它缓存了从-128到127之间的所有的整数对象.如果在这个区间内,他就会把变量当做一个变量,放到内存中:但如 ...

  7. 使用cmd时cd命令失效

    使用cmd时cd命令失效   近日使用cmd时总是出现无法cd到指定目录的情况 如下图所示 输入cd命令后依旧停留在原始路径 解决方法: 输入 cd D:\CE-5\Training_Sanple\n ...

  8. 【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 ...

  9. 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 ...

随机推荐

  1. str_replace使用

    $begintime=str_replace("-", "","2014-03-05");        (需要替换的字符串,换成字符串,需 ...

  2. 8 -- 深入使用Spring -- 8...1 Spring提供的DAO支持

    8.8.1 Spring提供的DAO支持. DAO模式是一种标准的Java EE设计模式,DAO模式的核心思想是,所有的数据库访问都通过DAO组件完成,DAO组件封装了数据库的增.删.查.改等原子操作 ...

  3. NetBpm 测试篇(3)

    http://www.netbpm.org/movie/holiday/holiday.html

  4. flexbox父盒子justify-content属性

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. PowerDesigner导出word,PowerDesigner把表导出到word,PDM导出word文档

    PowerDesigner导出word,PowerDesigner把表导出到word,PDM导出word文档 >>>>>>>>>>>& ...

  6. python是c语言开发的

    python是c语言开发的. #c语言,没有字符串:字符串使用字符组表现   hello —五个字符 字符数组 [’h’,’e’,…’o’]   所以python中如果对一个字符串进行修改,就是在内存 ...

  7. 使用dshow抓取摄像头数据时,回调函数时间为0的问题

    在使用dshow抓取摄像头数据,调用dshow的回调函数,如果发现SampleTime一直为0,如下图 那极有可能是使用RenderStream函数连接Filter时,指定的第一个参数为 PIN_CA ...

  8. vmware下虚拟机不能上网问题解决

    这个问题困扰了好久,vmware下装的虚拟机可以通过DHCP获取单独IP,但当用到管控较严格的环境,需要它与主机共享IP时,就不好使了. 今天在一篇文章中找到答案,如下图,windows系统中要启动V ...

  9. 使用 requests 维持会话

    什么是 Cookie 和 Session: 简单来说,我们访问每一个互联网页面,都是通过 HTTP 协议进行的,而 HTTP 协议是一个无状态协议,所谓的无状态协议即无法维持会话之间的状态.比如,仅使 ...

  10. Twitter 高并发高可用架构

    解决 Twitter的“问题”就像玩玩具一样,这是一个很有趣的扩展性比喻.每个人都觉得 Twitter很简单,一个菜鸟架构师随便摆弄一下个可伸缩的 Twitter就有了,就这么简单.然而事实不是这样, ...