先来看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. java数组之二分法查找

    认识: 猜字游戏 步数 所猜的数 结果 可能值的范围 0     1~100 1 50 太高 1~49 2 25 太低 26~49 3 37 太高 26~36 4 31 太低 32~36 5 34 太 ...

  2. 多进程（multiprocessing module）

    一.多进程 1.1 多进程的概念 由于GIL的存在,python中的多线程其实并不是真正的多线程,如果想要充分地使用多核CPU的资源,在python中大部分情况需要使用多进程.Python提供了非常好 ...

  3. css设置内容超出后显示省略号

    1.使用overflow: hidden把超出的内容进行隐藏: 2.然后使用white-space: nowrap设置内容不换行: 3.最后使用text-overflow: ellipsis设置超出内 ...

  4. php扩展开发-INI配置

    php.ini文件是用来保存各项扩展配置的文件,每个扩展都或多或少需要有一个定制化的配置,ini文件是一个很好的保存配置的方式,我们来看下怎么在自己的扩展里,使用到ini的配置功能 //创建ini的配 ...

  5. jpeglib的使用

    1. 解压jpeglib tar xvzf libjpeg-turbo-1.2.1.tar.gz 2. 阅读里面的说明文件,得到jpeg解压缩的一般步骤: /*Allocate and initial ...

  6. 004---Django简单示例

    一.MVC与MTV模型  在web开发领域里著名的MVC模式,所谓MVC就是把web应用分为模型(M).控制器(C).视图(V)三层,达到了解耦的效果. 一次完整的请求如图: 但是django用的是M ...

  7. Android 布局错乱 Android花屏

    最近做项目,妈的,有个一个很难受的bug. 这个bug ,自己这里没有手机,没有办法复现,找到了手机之后.解决了. 我先给大家看下什么叫布局错乱,花屏: 来张正常的图片: 正常情况下是这样的.然后, ...

  8. 被relativeLayout的grivate center 折腾死了

    <?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android=&q ...

  9. Centos7 grep命令简介

    grep 是一个最初用于 Unix 操作系统的命令行工具.在给出文件列表或标准输入后,grep会对匹配一个或多个正则表达式的文本进行搜索,并只输出匹配(或者不匹配)的行或文本. grep 可根据提供的 ...

  10. python开发记录第一篇

    1. 安装pyCharm,下载地址https://www.jetbrains.com/pycharm/ 2. 注册license,修改windwos系统hosts,文件路径为:C:\Windows\S ...