先来看w3c的background-size的几个值：

background-size:cover;    把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。背景图像的某些部分也许无法显示在背景定位区域中。

background-size:contain;  把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域。

在项目中经常会使用一张背景图当作网页背景，我一直使用的是 background-size:cover; cover这个值是使背景图铺满全屏，但是背景图片可能显示不完全。

后来发现 background-size:100% 100%;  可以使图片铺满全屏并且使背景图片显示完全（荡然不同屏幕下背景图片会被拉伸或缩小），这个值相对于cover来说，更适合用来设置全屏背景，尤其是自适应宽高的网页中。

还有个 background-size:contain;  这个就是把背景图等比例缩放,尽量适应屏幕。

background-size属性的几个实用的值的更多相关文章

  1. css中background背景属性概

    css中background背景属性概 background:url(背景图片路径)  no-repeat;/*不重复默认在左上方*/background:url(背景图片路径)  no-repeat ...

  2. background复合属性详解（上）：background-image

    background复合属性是个很复杂的属性,花样非常多,比较神奇的是css3 中支持多图片背景了,这篇文章先讲讲background-image属性,其他背景属性会在后续的文章综合总结. 一.最基本 ...

  3. 项目总结——SqlParameter的参数设置长度(size属性)

    看到很多朋友在实例化SqlParameter时,通常都没有指定参数的长度就直接给参数赋值了.就像下面的写法: new SqlParameter("@address", SqlDbT ...

  4. background系列属性

    1.background-color背景颜色属性 ①颜色表示方法 英语单词:red   blue   purple    skyblue. rgb:r代表红色   g代表绿色   b代表蓝色    也 ...

  5. 今天碰到一个问题，怎么限制用户在固定宽度的input输入框里输入的长度，由此涉猎到了maxlength属性和size属性以及它们的区别。

    最开始想首先要强制在一行,另外超出的隐藏.还有一个思路是把value的值的长度和框的长度怎么联系起来,具体怎么联系我也不知道. 在解决另外一个问题的时候,哥发给我的代码里无意中看见input有个max ...

  6. size属性

    size 属性 size 属性规定输入字段的尺寸(以字符计): <form action=""> First name:<br> <input typ ...

  7. 前端CSS-font属性,超链接的美化,css精灵,background综合属性

    前端CSS-font属性,超链接的美化,css精灵,background综合属性 1. font属性 使用font属性,能够将字号.行高.字体,能够一起设置. font:14px/24px " ...

  8. C# 调用存储过程出错：String[3]: Size 属性具有无效大小值 0

    存储过程如下 Create PROCEDURE [dbo].[Test] @FundId int, @vchStrategyToken nvarchar(), @ErrorMessage nvarch ...

  9. CSS探案之 background背景属性剖析

    首先,我们先来看看两个css属性:background和background-color,对!就是这两位,相信大家在平时应该没少 麻烦人家把,反正我是这样,几乎也少会用到背景图,原因很简单:就是有点害 ...

随机推荐

  1. iOS 检测版本更新（02）

    iOS 检测版本更新 如果我们要检测app版本的更新,那么我们必须获取当前运行app版本的版本信息和appstore 上发布的最新版本的信息. 当前运行版本信息可以通过info.plist文件中的bu ...

  2. architecture x86_64(Error)

    undefined symbols for architecture x86_64 错误如下 因为提示文件非第三方文件,最初尝试使用以下方式处理 iOS :undefined symbols for ...

  3. ARC下需要注意的内存问题

    之前发了一篇关于图片加载优化的文章,还是引起很多人关注的,不过也有好多人反馈看不太懂,这次谈谈iOS中ARC的一些使用注意事项,相信做iOS开发的不会对ARC陌生啦.这里不是谈ARC的使用,只是介绍下 ...

  4. ES6的数组方法之Array.from

    首先说说什么是数组:数组在类型划分上归为Object,属于比较特殊的对象,数组的索引值类似于对象的key值. 数组的几个注意点: 1.数组的长度是可读属性,不可更改,数组的长度根据索引最大值. 2.数 ...

  5. Vue项目架构设计与工程化实践

    摘自Berwin<Vue项目架构设计与工程化实践>github.com/berwin/Blog/issues/14 1.Vue依赖套件 vuex:项目复杂后,用vuex来管理状态 elem ...

  6. 用python画小猪佩奇(非原创)

    略作改动: # coding:utf-8 import turtle as t t.screensize(400, 300, "blue") t.pensize(4) # 设置画笔 ...

  7. 在haoodp-2.7.3 HA的基础上安装Hbase HA

    前提安装好hadoop基于QJM的高可用 node1 HMaster node2 HMaster.HRegionServer node3 HRegionServer node4 HRegionServ ...

  8. 云计算之KVM虚拟化实战

    1 基础环境规划 1.1 主机环境规划 系统版本 主机名 IP地址 内存 磁盘 CentOS6.9 kvm-node1 10.0.0.200 2G 20G CentOS6.9 kvm-node2 10 ...

  9. JavaScript高级程序设计第三版.CHM【带实例】

    从驱动全球商业.贸易及管理领域不计其数的复杂应用程序的角度来看,说 JavaScript 已经成为当今世界上最流行的编程语言一点儿都不为过. JavaScript 是一种非常松散的面向对象语言,也是 ...

  10. python爬虫-简单使用xpath下载图片

    首先 1.为方便以下进行 谷歌浏览器里要安装xpath脚本 2.下载一个lmxl     命令:pip install lxml 3. 以下三张图是一个,当时爬的 <糗事百科>里的图片 值 ...