CSS3中提出了background-size属性，该属性可以设置背景图片的大小，该属性的值设置为绝对数值或者百分比时对background-position没有任何影响，当设置为contain/cover时就会产生影响，其中有一个值会无效。

background-size:contain 该属性会让背景图片宽度或高度适应父元素，如果要缩放的话是等比例缩放，背景图片绝对不会超出父元素

background-size:cover 该属性会让背景图片填满父元素，如果要缩放的话是等比例缩放，背景图片可能会超出父元素

当图片的宽度大于高度时，position的top值无效

当图片的宽度小于高度时，position的left值无效

background-size对background-position的影响的更多相关文章

  1. Batch Size对神经网络训练的影响

    ​ 前言 这篇文章非常全面细致地介绍了Batch Size的相关问题.结合一些理论知识,通过大量实验,文章探讨了Batch Size的大小对模型性能的影响.如何影响以及如何缩小影响等有关内容. 本文来 ...

  2. ListView addHeaderView 对 position 的影响

    1. 在 public View getView(int position, View convertView, ViewGroup parent) 中position 和 是否有headerView ...

  3. position布局影响点击事件以及冒泡获取事件目标

    在编写功能时总是会出现很多意想不到的问题,现在就讲讲我遇到的两个问题,通过举一个相似的例子来解说. <1> 元素互相独立,不存在包含于被包含 选择城市的按钮,为它绑定点击事件,点击后就弹出 ...

  4. 用Qt写软件系列五：一个安全防护软件的制作（2）

    引言 在上一篇中讲述了主窗体的创建和设计.主窗体的无边框效果.阴影效果.拖动事件处理.窗体美化等工作在前面的博客中早就涉及,因此上篇博文中并未花费过多笔墨.这一篇继续讲述工具箱(Tool Button ...

  5. background之你不知道的background-position

    这是一个有趣的话题 其实我并不确切的平时大家是怎么去应用或者玩转一个属性,一个值.我能肯定的是这些东西都有不少的可玩性. 我今天要聊的 background-position 应该已经被大家玩得色彩斑 ...

  6. css2和CSS3的background属性简写

    1.css2:background:background-color || url("") || no-repeat || scroll || 0 0;  css3:  backg ...

  7. 20190328-CSS样式一：字体样式font-、文本样式text-、背景图样式background-

    目录 CSS参考手册:http://css.doyoe.com/ 1.字体简写:font:font-style || font-variant || font-weight || font-size ...

  8. html5常用属性text-shadow、vertical-align、background如何使用

    html5常用属性text-shadow.vertical-align.background如何使用 一.总结 一句话总结: 1.text-shadow:[x轴(X Offset) y轴(Y Offs ...

  9. background 设置文本框背景图

    background 属性的作用是给元素设置背景,它是一个复合属性,常用的子属性如下: background-color 指定元素的背景颜色. background-image 指定元素的背景图像. ...

  10. 例子：Background Audio Streamer Sample

    The Background Audio Streamer sample demonstrates how to create an app that uses a MediaStreamSource ...

随机推荐

  1. windows下使用mysql双机热备功能

    一. 准备工作 1. 准备两台服务器(电脑),接入局域网中,使互相ping得通对方 2. 两台服务器都安装mysql-server-5.1,必须保证mysql的版本一致 3. 假设,服务器A:192. ...

  2. Hibernate批量处理数据、HQL连接查询

    一.批量处理操作 批量处理数据是指在一个事务场景中处理大量数据.在应用程序中难以避免进行批量操作,Hibernate提供了以下方式进行批量处理数据: (1)使用HQL进行批量操作     数据库层面 ...

  3. SecurityError Error 2148 SWF 不能访问本地资源

    错误提示: SWF 文件不能被本地访问 不能访问本地 只有仅限于文件系统的 SWF 文件和可信的本地 SWF 文件可以访问本地资源 错误信息: SecurityError: Error #2148: ...

  4. u3d_shader_surface_shader_5

    CubeMap 的实现 参考: http://blog.csdn.net/candycat1992/article/details/21827365     制作cubeMap三维纹理,surface ...

  5. jvm虚拟机性能监控与故障处理工具

    java开发人员肯定知道jdk的bin目录中有java.exe javac.exe这两个命令行工具,但并非所有程序员都了解过jdk的bin目录之中其他命令行的作用.jdk的工具,体积都比较小,这些命令 ...

  6. Eclipse仿Visual AssistX 编辑着色插件

    1. 风格下载 http://www.eclipsecolorthemes.org/?view=theme&id=4602 2. 风格的安装与卸载 http://www.cnblogs.com ...

  7. uva10001 Garden of Eden

    Cellular automata are mathematical idealizations of physical systems in which both space and time ar ...

  8. window10 安装出现the error code is 2503错误的解决方法

    window10 安装出现the error code is 2503错误的解决方法:  设置 C:\WINDOWS\TEMP的权限

  9. PHP核心技术与最佳实践--笔记

    <?php error_reporting(E_ALL); /* php 5.3引入 延迟静态绑定 */ /* php5.4引入trait,用来实现多层继承 trait Hello{} trai ...

  10. Hibernate总结3

    一,对象的四种状态 临时状态: 与数据库没有对应,跟Session没有关联. 一般是新new出的对象. 持久化状态: 对象在Session的管理之中,最终会有对应的数据库记录.save saveoru ...