响应式Web设计- 背景图片
背景图片可以响应式调整大小或缩放，以下是三种不同的方式
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设计- 背景图片的更多相关文章
- css014 响应式web设计
css014 响应式web设计 一. 响应式web设计基础知识 1.rwd的三大理念:a.用于布局的弹性网络, b.用于图片和视频的弹性媒体,c.为不同屏幕宽度创建的不同样式的css媒体查询. ...
- 什么是响应式Web设计？怎样进行？
http://beforweb.com/node/6/page/0/3 开始第一篇.老规矩,先无聊的谈论天气一类的话题.十一长假,天气也终于开始有些秋天的味道,坐在屋里甚至觉得需要热咖啡.话说两年前也 ...
- HTML5、CSS3与响应式Web设计入门(2)
HTML5的宽泛含义开拓了Web开发的视野,增加了开发方案的多样性,同时也带给很多Web开发者不小的困惑,就是HTML5在涉及到Web某个应用领 域的开发时,到底代表了什么?本篇文章的目的就在于跟大伙 ...
- 响应式Web设计与CSS（下）
4.媒体类型与媒体查询 4.1 媒体类型 依据设备能力来分离样式的能力,始于媒体类型. 媒体类型用于针对特定的环境应用样式,包括屏幕显示.打印和电视等. 通过给link元素添加media属性,可以指定 ...
- 响应式WEB设计的9项基本原则
响 应式Web设计对于解决多类型屏幕问题来说是个不错方案,但从印刷的角度来看,其却存在着很多的困难.没有固定的页面尺寸.没有毫米或英寸,没有任何物理 限制,让人感到无从下手.随着建立网站可用的各种小工 ...
- <HTML5和CSS3响应式WEB设计指南>译者序
"不是我不明白,这世界变化快."崔健的这首歌使用在互联网领域最合适不过.只短短数年的功夫,互联网的浪潮还没过去,移动互联网的时代已经来临.人们已经习惯将越来越多的时间花在各种移动设 ...
- CSS3-基于浮动的布局，响应式WEB设计，定位网页上的元素，设计打印页面的css技术
基于浮动的布局: 1.除非图片设置了宽度,否则始终应该要对浮动的图片设置一个宽度,这样可以让浏览器给其他内容腾出环绕的空间 2.当侧边栏的高度与主内容区的高度不一致的时候,可以用个margin进行调整 ...
- 推荐35个新鲜出炉的响应式 Web 设计实例
响应式设计的准则在于根据用户使用的屏幕的分辨率来改变网站的的布局.因此,视频或图像的大小和文本的数量,可以被视为是一个明显的变化.让你即使从智能手机浏览一个网站的时候能轻松地看到网站上的重要内容.今天 ...
- 响应式Web设计(Responsive Web design)
中文名 响应式Web设计 提出时间 2010年5月 英 文 Responsive Web design 解 释 一个网站能够兼容多个终端 目 的 解决移动互联网的浏览 优 点 ...
随机推荐
- 企业级应用，如何实现服务化五（dubbo综合案例）
这是企业级应用,如何实现服务化第五篇.在上一篇企业级应用,如何实现服务化四(基础环境准备)中.已经准备好了zookeeper注册中心,和dubbo管理控制台.这一篇通过一个综合案例,看一看在企业级应用 ...
- Linq 知识总结
一.说明: LINQ,语言集成查询(Language INtegrated Query)是一组用于c#和Visual Basic语言的扩展.它允许编写C#或者Visual Basic代码以查询数据库相 ...
- win10无法写入删改c盘文件的解决方法
前言 最近使用了win10系统,结果发现无法对c盘的文件进行写入删改,在网上到处搜集资料,终于找到了解决方法,这里总结一下. 首先,本文针对的是win10家庭版,家庭版默认是不提供组策略功能,而我们需 ...
- 旧版本linaro-ubuntu更改软件源
最近打算研究下arm版本的linaro ubuntu桌面系统,但是在安装软件时速度实在太慢,便想修改一下软件源. 无奈查看系统版本时,显示的是linaro 11.12,但却不知和ubuntu有和关系, ...
- Flask (一) 简介
Flask简介 Flask是一个基于Python实现的Web开发‘微’框架 'MicroFramework' Django是一个重型框架 官方文档: http://flask.pocoo.org/do ...
- linux 打开FTP 功能
http://blog.csdn.net/jay285979220/article/details/62216622 今天在linux上安装完了vsftpd后,使用root账号一直无法登陆到服务器上. ...
- 【转】Effective C#观后感之提高Unity中C#代码质量的21条准则
转自:http://blog.csdn.net/swj524152416/article/details/75418162 我们知道,在C++领域,作为进阶阅读材料,必看的书是<Effectiv ...
- Linux查看某个端口是否启动
查看命令 netstat -an | 执行结果: [root@test ~]# netstat -an | tcp 0.0.0.0:* LISTEN 有tcp 这一行返回说明已开放
- PHP知识点总结2
PHP5数据类型 String(字符串), Integer(整型), Float(浮点型), Boolean(布尔型), Array(数组), Object(对象), NULL(空值). 字符串 你可 ...
- python flask学习(2)
本文主要整理下几个Flask扩展: 0.Flask-Bootstrap:集成Twitter开发的一个开源框架Bootstrap.1.Flask-Script:为Flask程序添加一个命令行解析器2.F ...