绝对响应全屏背景图像

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

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

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

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


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

阅读更多关于响应性设计:
响应式设计:使您的字体设计工作。
保持竞争力-学习响应性设计。
响应性的图像-为什么它是必须的和4种方法来完成它。
反应性设计:你需要知道的。
为智能设计提供响应性设计书籍。
我们有三种解决方案，给我们提供有响应的背景图像:
媒体查询
图像集属性
绝对响应的背景图像(稍后会详细介绍)
媒体查询
这个是很明显的解。定义一个小背景图像。然后，对于越来越大的屏幕尺寸，您使用媒体查询来定义越来越大的背景图像。

例如，你会使用这样的CSS:


身体{
背景:url(图片/ small-image.jpg);
}
@media screen和(min-width: 700px) {
身体{
背景:url(图片/ larger-image.jpg);
}
}
优势
这是显而易见的解决方案。我们使用的是纯CSS，不需要更改标记。

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

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

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

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

HTML

< !DOCTYPE html >
< html lang =“en”>
<头>
< meta charset = " utf - 8 " >
<标题>纯CSS响应背景图像演示。
< / >头
<身体>

<h1>纯CSS响应背景图像演示</h1>。
< /身体>
< / html >
(基本)的CSS

身体{
背景图片:图像集(
url(regular-image.jpg)1 x,
url(double-sized-image.jpg)2 x
);
}
问题
让我们暂且先不考虑浏览器对图像集属性的支持，这一事实并不是它所需要的。让我们忽略需要做这项工作的供应商前缀。真正的问题是，图像不是根据屏幕/视图的大小来选择的，而是基于像素密度。

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

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

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

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

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

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