先来看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. oauth2.0协议接口-第一篇-api逻辑

    开放平台是支持OAuth2.0和RESTful协议的资源分享平台,经过授权的合作伙伴可以读取和写入资讯.用户.文件.数据库等资源. 1.创建数据库表结构 CMSSyncClient(数据同步客户端) ...

  2. 爬虫之urllib模块

    1. urllib模块介绍 python自带的一个基于爬虫的模块. 作用:可以使用代码模拟浏览器发起请求. 经常使用到的子模块:request,parse. 使用流程: 指定URL. 针对指定的URL ...

  3. [USACO5.1]夜空繁星Starry Night

    题目背景 高高的星空,簇簇闪耀的群星形态万千.一个星座(cluster)是一群连通的星组成的非空连通星系,这里的连通是指水平,垂直或者对角相邻的两个星星.一个星座不能是另一个更大星座的一部分, 星座可 ...

  4. [Bzoj4408]神秘数（主席树）

    Description 一个可重复数字集合S的神秘数定义为最小的不能被S的子集的和表示的正整数. 例如S={1,1,1,4,13}, 1 = 1 2 = 1+1 3 = 1+1+1 4 = 4 5 = ...

  5. Eclipse字体修改

    第一步: 第二步: 第三步: 第四步: 第五步: 第六步:

  6. BurpSuite 的使用

    最好用的抓包软件, 不只是抓包软件 IE/Chrome中设置代理的方法是, 打开Internet选项面板->连接->局域网设置->取消勾选的使用自动配置脚本->勾选为LAN使用 ...

  7. Ubuntu下配置LAMP + PhpStorm

    本文仅作为一个记录,以下配置在Ubuntu 14.10 64-bit上验证通过． 安装Apache 2:sudo apt-get install apache2 安装成功能够后,通过浏览器访问loca ...

  8. WPF里ItemsControl的分组实现

    我们在用到ItemsControl时,有时会用到分组,如ListBox,ListView,DataGrid.WPF的ItemsControl可以实现分组,是依托于GroupStyle,以ListBox ...

  9. Eclipse 视图---Eclipse教程第05课

    关于视图 Eclipse视图允许用户以图表形式更直观的查看项目的元数据. 例如,项目导航视图中显示的文件夹和文件图形表示在另外一个编辑窗口中相关的项目和属性视图. Eclipse 透视图(perspe ...

  10. Spark-Streaming 常用流式计算算子

    UpdateStateByKey 使用说明:维护key的状态. 使用注意:使用该算子需要设置checkpoint 使用示例: object UpdateStateByKeyTest { def mai ...