适应手机浏览的网站设计如何添加响应式背景图像

2022-05-20 分类：网站设计

看看今天流行的网站设计，你肯定会看到的一个满屏图片背景的现象，因为图片在网站设计中的应用已经愈加广泛。不同于十几年前，网站建设只需要考虑PC端浏览即可，移动端已经逐渐成为网站用户访问的主流。所以学会适应手机浏览的网站设计如何添加响应式背景图像，将变的越来越重要，作为高端网站建设公司，甚至一名专业的网站设计制作开发人员，你不得不掌握这门全新的技术。添加这些图片的挑战之一来自好实践，即网站必须响应不同的屏幕大小和设备，这种方法被称为响应式网页设计，这也是本文讨论的主题。

一幅多屏图像

由于您的网站的布局变化和缩放与不同的屏幕大小，所以这些背景图像也必须相应地缩放它们的大小。事实上，这些“流畅的图像”是响应网站的关键部分之一(以及流畅的网格和媒体查询)。这三个部分从一开始就是响应性网页设计的主要部分，但是尽管向站点添加响应性内联图像一直相当容易(内联图像是作为HTML标记的一部分编码的图形)，对背景图像(使用CSS背景属性设置页面样式)也是如此，长期以来，这给许多Web设计人员和前端开发人员带来了巨大的挑战。值得庆幸的是，CSS中增加了“后台大小”属性，这使得这一点成为可能。

在另一篇文章中，我们介绍了如何使用CSS3属性背景大小来拉伸图像以适应窗口，但是还有一种更好、更有用的方法来部署此属性。为此，我们将使用以下属性和值组合：

background-size: cover;

Cover关键字属性告诉浏览器缩放图像以适合窗口，无论该窗口有多大或多小。图像将缩放以覆盖整个屏幕，但原始比例和纵横比保持不变，以防止图像本身被扭曲。图像将尽可能大地放置在窗口中，以便覆盖整个窗口曲面。这意味着您的页面中不会有任何空白点或图像上的任何失真，但也意味着某些图像可能会根据屏幕和有问题的图像的宽高比进行修剪。例如，图像的边缘(顶部、底部、左侧或右侧)可能会在图像上被切断，具体取决于用于“背景位置”特性的值。如果将背景设置为“左上方”，则图像上的任何多余部分都将从底部和右侧消失。如果你使背景图像居中，多余的部分将从所有的侧面消失，但是由于多余的部分被分散开来，对任何一侧的影响都会减少。

如何设置COVER大小

创建背景图像时，最好创建一个相当大的图像。虽然浏览器可以使图像变小而不会对视觉质量产生明显影响，但当浏览器将图像放大到比原始尺寸更大的尺寸时，图像的视觉质量将会下降，变得模糊和像素化。这样做的缺点是，当您将巨幅图像传送到所有屏幕时，页面的性能会受到影响。当您这样做时，请确保为下载速度和网络传输做好适当的准备。最后，您需要在足够大的图像大小和质量与合理的文件大小之间找到适合的下载速度。

使用缩放背景图像的常用方法之一是，当您希望该图像占用页面的整个背景时，无论该页面是宽的、在台式机上查看的，还是小得多的，并且正在发送到手持移动设备。

将图像上载到网站主机，并将其作为背景图像添加到CSS中：

background-image: url(fireworks-over-wdw.jpg);
background-repeat: no-repeat;
background-position: center center;
background-attachment: fixed;

首先添加浏览器前缀CSS：

-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;

然后添加CSS属性：

background-size: cover;

使用适合不同设备的不同图像。

虽然桌面或笔记本电脑体验的响应性设计很重要，但可以访问Web的设备种类已显著增加，随之而来的还有更多不同的屏幕大小。如前所述，例如，在智能手机上加载一个非常大的响应式背景图像，并不是一个高效或注重带宽的设计。了解如何使用媒体查询来提供适合于将在其上显示的设备的图像，并进一步提高您的网站与移动设备的兼容性。

分享标题：适应手机浏览的网站设计如何添加响应式背景图像
链接地址：/news21/155521.html

网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有网站设计等

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：创新互联

猜你还喜欢下面的内容