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. python基础(五)缩进和选择

    作者:Vamei 出处:http://www.cnblogs.com/vamei 欢迎转载,也请保留这段声明.谢谢! 缩进 Python最具特色的是用缩进来标明成块的代码.我下面以if选择结构来举例. ...

  2. 六、Android学习第五天——Handler的使用（转）

    (转自:http://wenku.baidu.com/view/af39b3164431b90d6c85c72f.html) 六.Android学习第五天——Handler的使用 注意:有很多功能是不 ...

  3. Linux压缩指令

    1.windows系统和Linux系统的压缩文件只有zip格式的是通用的 2.windows系统可以解压几乎所有的Linux压缩格式 3.Linux压缩指令 gzip 指令 格式: gzip 压缩的文 ...

  4. Flex 布局教程：语法篇[转]

    网页布局(layout)是CSS的一个重点应用. 布局的传统解决方案,基于盒状模型,依赖 display属性 + position属性 + float属性.它对于那些特殊布局非常不方便,比如,垂直居中 ...

  5. [转]Bootstrap 3.0.0 with ASP.NET Web Forms – Step by Step – Without NuGet Package

    本文转自:http://www.mytecbits.com/microsoft/dot-net/bootstrap-3-0-0-with-asp-net-web-forms In my earlier ...

  6. 网络之Ip地址

    0.0.0.0---255.255.255.255 Ip地址分类(D.E)不对外开放 网络类别 最大网络数 IP地址范围(,唯一的,花钱的) 最大主机数 私有IP地址范围 (做内网ip,不可直接访问公 ...

  7. AC日记——统计单词数 openjudge 1.12 5

    05:统计单词数 总时间限制:  1000ms 内存限制:  65536kB 描述 一般的文本编辑器都有查找单词的功能,该功能可以快速定位特定单词在文章中的位置,有的还能统计出特定单词在文章中出现的次 ...

  8. 给ros安装arbotix simulator仿真环境

    首先下载程序包.编译.安装. cd ~/catkin_ws/src git clone https://github.com/pirobot/rbx1.git cd rbx1 git checkout ...

  9. 转：Git 求生手册 - 第三章分支工作

    from:http://newbranch.cn/zhi-zuo-fen-zhi-lai-gong-zuo-git-gh-pages-branching/ 来自:片段 实战 说了这么一大堆分支的东西. ...

  10. JavaScript 运算符

    JavaScript 运算符 JavaScript 运算符用于赋值,比较值,执行算术运算等. JavaScript 算术运算符 算术运算符用于执行两个变量或值的运算. 赋值 y = 5, 以下表格将向 ...