响应式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>
最新文章
- SQL SERVER：使用工具观察与分析数据库中锁信息
- MyBatis魔法堂：各数据库的批量Update操作
- 迪杰斯特拉(Java)
- cannot find -lgcc_s
- Centos环境下部署游戏服务器－iptables
- 从零开始学ios开发（七）：Delegate，Action Sheet， Alert
- 深入浅出 JavaScript 变量、作用域和内存 v 0.5
- [前端笔记]第三篇:JavaScript
- Udp实现简单的聊天程序
- PHP正则表达式试题
- Android Studio的使用（九）--设置IDE编码格式
- 算法-java代码实现插入排序
- Java内存溢出异常（下）
- ajax 的一些参数
- nigx
- python同步原语--线程锁
- 53环境Jenkins新增工程配置
- 不依赖三方库从图像数据中获取宽高-gif、bmp、png、jepg
- java8 字符串转换 list long Integer
- C#中使用多款LevelDB.Net封装测试性能