先来看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. ORM初级实战简单的数据库交互

    setting.py中: """ Django settings for untitled3 project. Generated by 'django-admin st ...

  2. 返回用户指定页面的web服务器

    import socket import re import os def handle_client(socket_con): """ 接收来自客户端的请求,并接收请求 ...

  3. while循环,格式化输出,运算符

      1.while循环 1.while 基本机构: while 条件: 循环体 执行流程: 当条件成立时为真,执行循环体. 再次判断条件是否成立,如果成立再次执行. 当判断条件结果为假时,跳出循环,本 ...

  4. thinkphp centos7 报class POD not found

    没有安装PDO yum install php70w-pdo yum install php70w-mysqlnd 两条命令搞定

  5. python文件操作练习之文件备份

    文件备份 ## 文件备份 # 打开文件 def backup(file1, file2): with open(file1, 'rb') as f1,\ open(file2, 'wb') as f2 ...

  6. Codeforces Round #482 (Div. 2) ：C - Kuro and Walking Route

    题目连接:http://codeforces.com/contest/979/problem/C 解题心得: 题意就是给你n个点,在点集中间有n-1条边(无重边),在行走的时候不能从x点走到y点,问你 ...

  7. [回文树][BZOJ2160][国家集训队]拉拉队排练

    题面 Description 艾利斯顿商学院篮球队要参加一年一度的市篮球比赛了.拉拉队是篮球比赛的一个看点,好的拉拉队往往能帮助球队增加士气,赢得最终的比赛.所以作为拉拉队队长的楚雨荨同学知道,帮助篮 ...

  8. Nginx安装，目录结构与配置文件详解

    1.Nginx简介 Nginx(发音同 engine x)是一款轻量级的Web 服务器/反向代理服务器及电子邮件(IMAP/POP3)代理服务器,并在一个BSD-like 协议下发行.由俄罗斯的程序设 ...

  9. Alter the structure of web pages with JavaScript

    Most of the DOM methods you've seen so far are useful for identifying elements. Both getElementById ...

  10. 内存泄漏分析 mat 使用 activity泄漏

    https://github.com/square/leakcanary square 公司出品 mat 下载地址: http://pan.baidu.com/s/1kVPoIxx 两天,一个内存泄漏 ...