响应式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 解 释 一个网站能够兼容多个终端 目 的 解决移动互联网的浏览 优 点 ...
随机推荐
- UGUI DOTween渐隐渐现
Tween tweenAlpha; tweenAlpha = DOTween.To(() => MaskSpr.fillAmount, x => MaskSpr.fillAmount = ...
- P4463 [国家集训队] calc（拉格朗日插值）
传送门 设\(dp[i][j]\)为考虑\(i\)个数,其中最大值不超过\(j\)的答案,那么转移为\[dp[i][j]=dp[i-1][j-1]\times i\times j+dp[i][j-1] ...
- IT兄弟连 JavaWeb教程 El基本语法
EL(Expression Language)表达式语言是在JSP 2.0版本中引入的新特性,它用于JSP文件中的数据访问.这种表达式语言能简化JSP文件中数据访问的代码,可用来替代传统的基于&quo ...
- MySQL索引的学习
MySQL索引的学习 关于使用mysql索引的好处,合理的设计并使用mysql索引能够有效地提高查询效率.对于没有索引的表,单表查询可能几十万数据就是平静,在大型网站单日可能会产生几十万甚至几百万的数 ...
- Codeforces Round #541 (Div. 2) B.Draw!
链接:https://codeforces.com/contest/1131/problem/B 题意: 给n次足球比分,求存在平局的机会. 思路: 结构体存储,unique后,判断是否有分数交叉. ...
- getAnnotation为null的坑
在写一个基于SpringAOP的权限控制的. 自己定义了一个注解,然后逻辑代码需要通过获取自定义注解的一个属性来进行权限控制. 下面简单上一下关键代码: 自定义注解: @Documented //有关 ...
- 满足java对redis的所有操作，token，验证码过期时间等
很实用 链接在此 https://www.cnblogs.com/edisonfeng/p/3571870.html System.out.println("=============== ...
- java数据结构和算法06（红黑树）
这一篇我们来看看红黑树,首先说一下我啃红黑树的一点想法,刚开始的时候比较蒙,what?这到底是什么鬼啊?还有这种操作?有好久的时间我都缓不过来,直到我玩了两把王者之后回头一看,好像有点儿意思,所以有的 ...
- cookie和session基础以及在Django中应用
看了会视频,终于搞懂了~ 1.cookie cookie:保存状态 cookie的工作原理是:由服务器产生内容,浏览器收到请求后保存在本地:当浏览器再次访问时,浏览器会自动带上cookie,这样服务器 ...
- Android 验证码倒计时两种方案
使用 第一种方案:自定义控件 1.在布局中使用 <?xml version="1.0" encoding="utf-8"?> <Relativ ...