先来看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. RabbitMQ安装---rpm安装

    首先介绍一下个人的安装环境是Linux-centos7: 一.安装和配置rabbitmq的准备工作: 下载erlang:    wget http://www.rabbitmq.com/release ...

  2. LeetCode962. 最大宽度坡

    问题:最大宽度坡 给定一个整数数组 A,坡是元组 (i, j),其中  i < j 且 A[i] <= A[j].这样的坡的宽度为 j - i. 找出 A 中的坡的最大宽度,如果不存在,返 ...

  3. 一次完整的http请求处理过程

    一次完整的HTTP请求需要的7个步骤 HTTP通信机制是在一次完整的HTTP通信过程中,Web浏览器与Web服务器之间将完成下列7个步骤: 1:建立TCP连接 在HTTP工作开始之前,Web浏览器首先 ...

  4. ES6笔记03-Set和Map数据结构

    ES6提供了新的数据结构Set.它类似于数组,但是成员的值都是唯一的,没有重复的值.Set本身是一个构造函数,用来生成Set数据结构. var s = new Set(); [2, 3, 5, 4, ...

  5. xml中encoding

    前同天和同事在讨论xml里的encoding属性和文件格式的关系,终于彻底的弄清楚了.以前理解的是,xml里的encoding里定义必须与文件格式相匹配.即有这样的xml Introduction&l ...

  6. Head First Java-图形化界面

    Head First Java是本挺好的书,讲的比较清楚和简单.主要看原则.概念啥的.语法什么的,还是靠谷歌吧:) 这部分的笔记也有很多了,最近会努力更新和搬运.顺便自己也重新读一下. 就酱.想要这本 ...

  7. python创建字典

    创建: {x:x**2 for x in (2,4,6)} dict(xjm=110,lxh=119,pzq=120) dict([('a',1),('b',2),('c',3)])

  8. POJ：3061-Subsequence(尺取法模板详解)

    Subsequence Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 18795 Accepted: 8043 Descript ...

  9. 17-比赛1 B - 子串计算 Chef and his string challenge （string的运用）

    Chef's best friend Jerry gives Chef a string A and wants to know the number of string A that can be ...

  10. selenium+PhantomJS 抓取淘宝搜索商品

    最近项目有些需求,抓取淘宝的搜索商品,抓取的品类还多.直接用selenium+PhantomJS 抓取淘宝搜索商品,快速完成. #-*- coding:utf-8 -*-__author__ =''i ...