背景图片可以响应式调整大小或缩放，以下是三种不同的方式

1、如果 background-size 属性设置为 "contain", 背景图片将按比例自适应内容区域。图片保持其比例不变：

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Bootstrap历练作品</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />

<style>
div {
width:100%;
height:500px;
border:1px solid #cecece;
background-image:url("Images/HTML5LOGO.jpg");
background-repeat:no-repeat;
background-size:contain;// 背景图片将按比例自适应内容区域。

}
</style>
</head>
<body>
<p>调整浏览器窗口查看图像是如何扩展的。</p>
<div></div>
</body>
</html>

2、如果 background-size 属性设置为 "100% 100%" ，背景图片将延展覆盖整个区域：

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Bootstrap历练作品</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />

<style>
div {
width:100%;
height:500px;
border:1px solid #cecece;
background-image:url("Images/HTML5LOGO.jpg");
background-repeat:no-repeat;
background-size:100% 100%;//简单的话就是以内容区域扩展。
}
</style>
</head>
<body>
<p>调整浏览器窗口查看图像是如何扩展的。</p>
<div></div>
</body>
</html>

3、如果 background-size 属性设置为 "cover"，则会把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。注意该属性保持了图片的比例因此 背景图像的某些部分无法显示在背景定位区域中。简单的话就是以内容区域按比例扩展。

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Bootstrap历练作品</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />

<style>
div {
width:100%;
height:500px;
border:1px solid #cecece;
background-image:url("Images/HTML5LOGO.jpg");
background-repeat:no-repeat;
background-size:cover;//简单的话就是以内容区域按比例扩展。
}
</style>
</head>
<body>

<p>调整浏览器窗口查看图像是如何扩展的。</p>
<div></div>
</body>
</html>

不同的设备上显示不同的图片

大尺寸图片可以显示在大屏幕上，但在小屏幕上确不能很好显示。我们没有必要在小屏幕上去加载大图片，这样很影响加载速度。所以我们可以使用媒体查询，根据不同的设备显示不同的图片。

以下大图片和小图片将显示在不同设备上：

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Bootstrap历练作品</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<style>
body {
background-image:url("Images/HTML5LOGO.jpg");
background-repeat:no-repeat;
}
@media only screen and (min-width:400px) {
body {
background-image:url("Images/logo.png");
background-repeat:no-repeat;
}
}
</style>
</head>
<body>
</body>
</html>

你可以使用媒体查询的 min-device-width 替代 min-width 属性，它将检测的是设备宽度而不是浏览器宽度。浏览器大小重置时，图片大小不会改变。

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Bootstrap历练作品</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<style>
body {
background-image:url("Images/HTML5LOGO.jpg");
background-repeat:no-repeat;
}
@media only screen and (min-device-width:400px) {
body {
background-image:url("Images/logo.png");
background-repeat:no-repeat;
}
}
</style>
</head>
<body>
</body>
</html>

响应式Web设计- 背景图片的更多相关文章

  1. css014 响应式web设计

    css014 响应式web设计 一.    响应式web设计基础知识 1.rwd的三大理念:a.用于布局的弹性网络, b.用于图片和视频的弹性媒体,c.为不同屏幕宽度创建的不同样式的css媒体查询. ...

  2. 什么是响应式Web设计？怎样进行？

    http://beforweb.com/node/6/page/0/3 开始第一篇.老规矩,先无聊的谈论天气一类的话题.十一长假,天气也终于开始有些秋天的味道,坐在屋里甚至觉得需要热咖啡.话说两年前也 ...

  3. HTML5、CSS3与响应式Web设计入门(2)

    HTML5的宽泛含义开拓了Web开发的视野,增加了开发方案的多样性,同时也带给很多Web开发者不小的困惑,就是HTML5在涉及到Web某个应用领 域的开发时,到底代表了什么?本篇文章的目的就在于跟大伙 ...

  4. 响应式Web设计与CSS（下）

    4.媒体类型与媒体查询 4.1 媒体类型 依据设备能力来分离样式的能力,始于媒体类型. 媒体类型用于针对特定的环境应用样式,包括屏幕显示.打印和电视等. 通过给link元素添加media属性,可以指定 ...

  5. 响应式WEB设计的9项基本原则

    响 应式Web设计对于解决多类型屏幕问题来说是个不错方案,但从印刷的角度来看,其却存在着很多的困难.没有固定的页面尺寸.没有毫米或英寸,没有任何物理 限制,让人感到无从下手.随着建立网站可用的各种小工 ...

  6. <HTML5和CSS3响应式WEB设计指南>译者序

    "不是我不明白,这世界变化快."崔健的这首歌使用在互联网领域最合适不过.只短短数年的功夫,互联网的浪潮还没过去,移动互联网的时代已经来临.人们已经习惯将越来越多的时间花在各种移动设 ...

  7. CSS3-基于浮动的布局，响应式WEB设计，定位网页上的元素，设计打印页面的css技术

    基于浮动的布局: 1.除非图片设置了宽度,否则始终应该要对浮动的图片设置一个宽度,这样可以让浏览器给其他内容腾出环绕的空间 2.当侧边栏的高度与主内容区的高度不一致的时候,可以用个margin进行调整 ...

  8. 推荐35个新鲜出炉的响应式 Web 设计实例

    响应式设计的准则在于根据用户使用的屏幕的分辨率来改变网站的的布局.因此,视频或图像的大小和文本的数量,可以被视为是一个明显的变化.让你即使从智能手机浏览一个网站的时候能轻松地看到网站上的重要内容.今天 ...

  9. 响应式Web设计(Responsive Web design)

    中文名 响应式Web设计 提出时间 2010年5月 英    文 Responsive Web design 解    释 一个网站能够兼容多个终端 目    的 解决移动互联网的浏览 优    点 ...

随机推荐

  1. HDU5997 【线段树】

    思路: 用vector存一下各种颜色的区间,每次处理颜色的区间,相同颜色不需要更新.区间最多1e6个没错,但是随着颜色的更替区间只会越来越少. 维护区间左右两端的颜色,lazy一下. 区间合并的时候 ...

  2. 2016CCPC东北地区大学生程序设计竞赛【01/03/05/06/08】

    吧啦啦啦啦啦啦啦啦啦啦啦能量,ACM,跨!变身!变成一个智障! 04正在酝酿中!!!马上更新!!!!!  01题意:有一个n个点的图,对于任意两个不同的点,他的权值是两个点下标的最小公倍数,求最小生出 ...

  3. 51nod1640(kruscal)

    题目链接:http://www.51nod.com/onlineJudge/questionCode.html#!problemId=1640 题意:中文题诶- 思路:kruscal 题目要求是在边权 ...

  4. 洛谷P4238 【模板】多项式求逆（NTT）

    传送门 学习了一下大佬的->这里 已知多项式$A(x)$,若存在$A(x)B(x)\equiv 1\pmod{x^n}$ 则称$B(x)$为$A(x)$在模$x^n$下的逆元,记做$A^{-1} ...

  5. suse 11入门学习

    1 去掉显示隐藏文件的默认配置 vi /etc/bash.bashrc 找到 ; then LS_OPTIONS="-A -N $LS_OPTIONS -T 0" else LS_ ...

  6. 新装ubuntu 12.04 ， 使用技巧

    *********************************************** 一.让Ubuntu 12.04开机默认进入命令行模式. 修改 /etc/default/grubGRUB ...

  7. 实现easyui combobox中textField字段的拼接

    开发过程中遇到这样的一个需求: 从后台得到的两个字段aa.bb拼接为一个字段aabb显示在easyui combobx的下拉选项中. 实现方法: 利用formatter属性定义如何呈现行: 页面代码: ...

  8. struts2学习笔记 day01

  9. iOS UITableView 解决估算行高和指定行高的矛盾

    喜欢交朋友的加:微信号 dwjluck2013 1.一般来说 在iOS 中若UITableViewCell 固定行高, 会通过 - (CGFloat)tableView:(UITableView *) ...

  10. 洛谷 P4503 [CTSC2014]企鹅QQ

    暴力枚举不同的一位即可.. 主要是常数问题 1.统计答案时用sort速度快于用tr1/unordered_map,后者又快于map (tr1/unordered_map完全达不到理论复杂度上的O(1) ...