完全响应时网站设计全屏背景图像

传统观点认为，网站大的图片会卖出去。更主观的观点告诉我们大的图像是漂亮的。不管什么原因，我们喜欢我们的大图像。更重要的是，我们真的喜欢把它们放在背景中，把大的文本放在上面。

我不是来讨论我们是否应该这样做的。即使我认为大背景图片是网页设计的祸根(我不知道)，人们还是会继续使用它们。,包括我。他们大。他们是漂亮的。不喜欢什么?

他们在我们的集体工具箱里占有一席之地，但我们需要把它们做好。我不是说要选择正确的图像，这取决于你。我说的是确保我们的图像不会谋杀人们的带宽。如果我们真的要设计“移动优先”，那就必须包括我们的图像。

这个问题
现在，当人们想要填充一个页面的背景，或者仅仅是一个相当大的div时，他们通常只使用这样的CSS(我分别用每个属性来明确):

body, .bigdiv {
background-image: url(path/to/image.jpg);
background-size: cover;
}
现在，对于台式机和任何有无限数据的互联网来说，这都是不错的选择，但如果越来越多的移动用户想要玩，那该怎么办呢?你真的要让他们下载那些潜在的巨大的。jpeg到他们的手机上，花费他们实际的钱吗?



优势
这是显而易见的解决方案。我们使用的是纯CSS，不需要更改标记。

问题
这种方法带来了一个问题:移动浏览器，尤其是老的浏览器，会倾向于下载所有的图像，从而破坏了运动的目的。好消息是有变通办法。坏消息是:它们是变通方法。他们在默认情况下有点臃肿。

尽管如此，他们仍然工作得很好。如果您想要学习它们，请检查这个:媒体查询和资产下载结果。

图像集
所有的图像集都提供一个图像列表，这些图像通常除了大小之外都是相同的。与srcset HTML属性一样，浏览器将根据设备自行决定哪种图像最好下载。

我为这两种解决方案都包含了源文件，因此您可以在操作中看到它们。你可以在下面下载。现在，你需要知道的是:


问题
让我们暂且先不考虑浏览器对网站建设图像集属性的支持，这一事实并不是它所需要的。让我们忽略需要做这项工作的供应商前缀。真正的问题是，图像不是根据屏幕/视图的大小来选择的，而是基于像素密度。

这意味着它很适合在视网膜屏幕和普通屏幕之间切换。需要一个更大的图像来处理那些巨大的iMac屏幕?图像集函数在这里提供帮助。如果这是您所需要的，那么映像集是为您准备的。

你可以用它来做小的图片:图标，头像，以及其他类似的东西。它们足够小，不会破坏移动用户的数据计划。但是我们想要大量的背景图像，对吧?所以这个解还没准备好。

完全响应背景图像
因此，到目前为止，我们都看到了我们需要的:基于屏幕/viewport大小的响应图像，我们希望浏览器只下载其中一个。你猜怎么着?我们可以这么做。

坏消息是，它需要更改您的标记。然而，这种变化是微乎其微的。您需要做的只是添加一个div和背景图像本身。

这整个事情的工作原理是两个概念:绝对定位和srcset HTML属性。绝对定位已经存在一段时间了，它只是像它应该做的那样工作。没什么好担心的。另一方面，srcset属性是更新的，并且不太受支持。

然而，根据最新的使用统计数据，srcset得到了一些mobi的支持。 本文来源：天荣科技，转载请注明出处！如果需要营销型网站建设、微商城、小程序商城、多端小程序 请联系我们！