响应式Web设计- 背景图片

最新推荐文章于 2024-01-09 20:32:15 发布

chumiaosang7620

最新推荐文章于 2024-01-09 20:32:15 发布

阅读量353

点赞数

原文链接：https://my.oschina.net/u/3338272/blog/858215

版权

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

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

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

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

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>
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>

转载于:https://my.oschina.net/u/3338272/blog/858215

chumiaosang7620

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
响应式Web设计- 背景图片

背景图片可以响应式调整大小或缩放，以下是三种不同的方式 1、如果 background-size 属性设置为 "contain", 背景图片将按比例自适应内容区域。图片保持其比例不变： <!DOCTYPE html> <html> <head> <...
复制链接

扫一扫