Web设计中的大背景图像：提示和示例

在本文中，我想提出一些可靠的技术来构建大的，超大的背景图像。这可以通过基本的CSS3 / CSS2技术或使用一些开源的第三方jQuery插件来实现 。没有正确或错误的答案，只有较旧的旧版浏览器提供不同级别的支持 。

深入研究铆接开发技术的这一集合，看看可以将它们整合在一起。

CSS交易技巧

为了使我们入门，我想介绍一下在CSS Tricks上发布的非常有用的文章，其中概述了许多这些想法。具有最大支持水平的最简单解决方案是通过CSS技术。我发现CSS3方法可以在大多数常见的浏览器中正常工作，甚至还有处理旧版本Internet Explorer的技巧 。

让我们看一下CSS3代码，以将这些背景图像完全以100％的响应宽度放置。我将使用Chris Coyeir的文章中的代码来说明实现起来的难易程度。

html { 
  background: url(https://assets.hongkiat.com/uploads/oversized-background-image-design/bg.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='https://assets.hongkiat.com/uploads/oversized-background-image-design/bg.jpg', sizingMethod='scale')";
  filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='.https://assets.hongkiat.com/uploads/oversized-background-image-design/bg.jpg', sizingMethod='scale');
}

演示版

HTML元素比主体要容易得多，因为我们知道所有内容都包裹在其中。然后，我们以完整的中心位置应用背景图像，没有重复并在滚动时固定。较新CSS3 background-size属性适用于所有定位魔术。利用许多供应商前缀也将为我们提供更广泛的支持。

应该注意的是，过滤器属性在IE中并不总是很好。有人报告滚动条或页面上的文本选择有问题。要解决此错误，您可以尝试将背景图像代码应用到体内的内部div，并将其设置为完整的100％宽度/高度 。

CSS2后备

令人惊讶的是，我发现比其他任何样式都更多的浏览器支持CSS3方法。但是，我仍将在img元素上使用常规CSS属性提供此辅助方法。

我觉得此方法的最大细微差别在于，当右键单击背景时，它将弹出上下文菜单，就像您单击图像而不是单击网页一样。对于无法弄清菜单为何不同的访问者，这可能会很烦人。但是，如果您在努力使用CSS3方法并且仍然希望避免使用JavaScript，那么这可能是您唯一的选择。

img.bg {
  /* Set rules to fill background */
  min-height: 100%;
  min-width: 1024px;
	
  /* Set up proportionate scaling */
  width: 100%;
  height: auto;
	
  /* Set up positioning */
  position: fixed;
  top: 0;
  left: 0;
}

演示版

在打开任何其他div之前，图像标签应直接位于您体内。图像将掉入背景，所有其他内容都应环绕。众所周知，此功能可在所有主要浏览器（Safari / Firefox / Chrome / Opera）中使用，但在IE6-7中并不完全支持。

JavaScript解决方案

让我们进入使用jQuery插件而不是典型CSS的更具动态性的代码。这些在编写时通常会考虑到灵活性，因此移动智能手机和响应式布局应放在第一位。 jQuery也是一种相当通用的语言，大多数Web开发人员对此有些熟悉。

可能有数十种jQuery插件可供选择，但是我将介绍我的三个收藏夹。这些代码库中的大多数都非常容易在新网站中实现和设置。它们全部托管在Github上，因此提供了一个出色的开源解决方案。这意味着随着更多开发人员将他们的知识贡献于每个插件的代码库，您可以期望减少错误并获得更多支持。

反拉伸

一些开发人员已经看到Backstretch这个名字出现在其他网站和博客文章中。这是一个非常受欢迎的插件，自2009年12月以来已经存在了将近3年。开发人员一直在急切地更新此插件，现在它甚至支持图像幻灯片以及静态背景图像。

要自己实施代码，只需下载脚本的副本，然后使用脚本标签将其附加到您的网页即可。如果要使用CDN云托管，请尝试使用此cdnjs链接。然后，我们只需要打开另一个脚本标签，然后像这样输入一行jQuery代码即可：

$.backstretch("https://assets.hongkiat.com/uploads/oversized-background-image-design/bg.jpg");

演示版

代码库被编写为单行执行。这使得Backstretch对于非技术性Web开发人员来说都非常容易上手。您将不需要应用任何额外HTML标记或其他CSS属性。并且图像将对浏览器窗口做出100％响应。

  // Duration is the amount of time in between slides,
  // and fade is value that determines how quickly the next image will fade in
  $.backstretch([
      "https://assets.hongkiat.com/uploads/oversized-background-image-design/photo1.jpg",
      "https://assets.hongkiat.com/uploads/oversized-background-image-design/photo2.jpg",
      "https://assets.hongkiat.com/uploads/oversized-background-image-design/photo3.jpg"
  ], {duration: 3000, fade: 750});

上面的代码略有更改，以在后台支持幻灯片显示。您可以列出要在幻灯片内显示的图像位置，然后再列出两位元数据。持续时间值是幻灯片之间的时间量，以毫秒为单位。第二个淡入度值将确定从一个图像淡入另一个图像所需的毫秒数。

维加斯

Vegas Background jQuery插件是正在寻求快速实现的Web开发人员的另一个绝佳选择。让Vegas脱颖而出的原因在于，您有更多的背景自定义选项。实际上，可以在照片顶部使用条纹或点来设置叠加效果。可以在Vegas文档设置页面上看到一个演示，该页面使用有斑点的叠加效果。

您需要包括在Github页面上找到的Vegas JS和CSS文件的副本。该插件仅使用一行代码即可工作，但是与Backstretch相比，有很多可能的自定义项。现在，让我们用代码构建一个简单的演示示例：

$.vegas({
  src:'/img/background.jpg'
});

演示版

信不信由你，我们也可以只使用一行或一行代码来获得与以前相同的效果。如果要构建图像幻灯片或添加任何叠加纹理，Vegas可以进一步自定义。在覆盖文档页面上，您会注意到一系列模式样本，可以在那里进行演示。与其他jQuery插件相比，这是使用Vegas进行图像叠加的好处的一个很好的例子。

任何伸展

我最后的jQuery解决方案是一个名为Anystretch的插件，它实际上是Backstretch插件的一个分支。有一些细微的差异可能会帮助开发人员寻求更新背景图像或将BG应用于各种页面元素。

这个脚本的工作与之前一样，需要jQuery的副本和anystretch文件的副本。然后，按照我在下面设置的语法，将其放置在另一组<script></script>标记内。请注意，速度参数决定了图像在完成加载后褪色的速度，以毫秒为单位。

  $.anystretch("https://assets.hongkiat.com/uploads/oversized-background-image-design/bg.jpg", {speed: 150});

现场演示

这种方法也可以完美地处理div或体内其他元素。每张BG照片仍将以适当的宽高比调整大小，并在移动浏览器上显示为完全响应。下面的演示代码将背景图片放置在ID为#leftbox的div上。

  $('#leftbox').anystretch("https://assets.hongkiat.com/uploads/oversized-background-image-design/bg.jpg", {speed: 150});

最终的解决方案？

最终，我们生活在一个为语义Web问题提供多种解决方案的时代。前端开发人员一直在努力寻求更多支持，并找出新的浏览器黑客。对于有兴趣将这些技术快速应用于网页布局的设计师社区而言，这是完美的选择。

我无法具体告知最佳解决方案，因为每个网站都会改变。但是我仍然是HTML5 / CSS3的拥护者，并且我认为第一个CSS3解决方案足以满足任何现代网站的需求。尽管公认的是，许多jQuery插件都能完美运行，甚至在不了解CSS3属性的浏览器中也将支持它们。

最后，一切都取决于您自己的选择，您认为最适合该项目。测试2到3个您的收藏夹，看看哪个在人群中脱颖而出。

网站背景过大的示例

除了上述方法，我还想提供一些设计灵感的例子。 Web设计人员通常熟悉大型背景布局，但是很难回忆起某些确切的域名。

在此展示中，我整理了60多个使用超大背景图片的网站示例 。查看布局样式，看看如何在自己的项目中模仿类似的技术。

Hiut牛仔布

凯雷姆·苏尔

枪与玫瑰

艺术

卡耶纳代理

斯德哥尔摩设计馆

马丁·科斯塔

戴维迪雅室内

丹尼尔·菲尔（Daniel Filler）

惠特曼斯

蒂姆·鲁西莱（Tim Roussilhe）

互动标签

安娜·萨弗龙奇克（Anna Safroncik）

DOJO工作室

包缠

创意人

十二餐厅

de Certeau＆Associates

Medis食品与酒吧

严工作室

理发师

反思婚礼

CGRendering

雪莱·桑德泽（Shelley Sandzer）

马库斯·托马斯（Marcus Thomas）

比亚马尔2012

激发

闪电战

Au Petit Panisse

Ringve Media

邵逸夫摄影

Werkstette

盐冲浪

巴勃罗·冈萨雷斯（PabloGonzález）

大卫·穆列特（David Mullett）

莫西·索佐（Moxie Sozo）

大卫·诺兰

弗莱克

比萨饼

500瓦

海豚交流

顶级美元摄影师

顶级美元模型

丽贝卡·巴里（Rebecca Barry）

治愈历史

巨人运动服

边上体育局

杰森·米勒（Jason Miller）

展示广告

伊内斯·帕佩特

空中漫步

哈斯·布朗滕

伊内斯·玛丽亚·加姆勒

杀手旅

35毫米设计

春夏

桑德伍德家园

马特·波特菲尔德

ASAA体系结构

艾耶·维尔尼斯

啊，阿西卡多斯

翻译自: https://www.hongkiat.com/blog/oversized-background-image-design/