石家庄网站设计与建设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％的width / height。
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代码即可：
1个
$.backstretch("https://assets.hongkiat.com/uploads/oversized-background-image-design/bg.jpg");
演示版
代码库被编写为单行执行。这使得Backstretch对于非技术性Web开发人员来说都非常容易上手。您将不需要应用任何额外的HTML标记或其他CSS属性。并且图像将对浏览器窗口做出100％响应。
1个
2
3
4
5
6
7
// 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});
上面的代码做了些微改动，以在后台支持幻灯片播放。您可以列出要在幻灯片内显示的图像位置，然后再列出两位元数据。持续时间值是幻灯片之间的时间量，以毫秒为单位。第二个淡入度值将确定从一个图像淡入另一个图像所需的毫秒数。
维加斯
在拉斯维加斯的背景jQuery插件是谁正在寻找一种快速实现网页开发者一个极好的选择。让Vegas脱颖而出的原因在于，您有更多的背景自定义选项。实际上，可以使用照片顶部的条纹或圆点设置叠加效果。可以在Vegas文档设置页面上看到一个演示，该页面使用有斑点的叠加效果。
您将需要包括在Github页面上找到的Vegas JS和CSS文件的副本。该插件仅使用一行代码即可工作，但是与Backstretch相比，有很多可能的自定义项。现在，让我们用代码构建一个简单的演示示例：
1个
2
3
$.vegas({
src:'/img/background.jpg'
});
演示版
信不信由你，我们也可以仅使用一行代码或一行代码来获得与以前相同的效果。如果您要构建图像幻灯片或添加任何叠加纹理，Vegas允许进一步自定义。在叠加文档页面上，您会注意到一系列模式样本，可以在此处进行演示。与其他jQuery插件相比，这是使用Vegas进行图像叠加的好处的一个很好的例子。
任何伸展
我最后的jQuery解决方案是一个名为Anystretch的插件，它实际上是Backstretch插件的分支。有一些细微的差异可以帮助开发人员寻求更新背景图像或将BG应用于各种页面元素。
这个脚本与之前需要jQuery副本和anystretch文件副本的方式相同。然后，按照我在下面设置的语法，将其放置在另一组标记中。请注意，速度参数决定了图像在完成加载后褪色的速度，以毫秒为单位。
1个
$.anystretch("https://assets.hongkiat.com/uploads/oversized-background-image-design/bg.jpg", {speed: 150});
现场演示
这种方法也可以完美地处理div或体内其他元素。每张BG照片仍将以适当的宽高比调整大小，并在移动浏览器上显示为完全响应。下面的演示代码将背景图片放在ID为的div上#leftbox。
1个
$('#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牛仔布
Hiut Denim网站设计公司
凯雷姆·苏尔
旧金山自由设计师Kerem网站
枪与玫瑰
Guns n Roses乐队音乐网站的照片
艺术
工作设计产品品牌工作室网站布局
卡耶纳代理
辣椒网站布局摄影
斯德哥尔摩设计院
室内设计斯德哥尔摩瑞典网站布局
马丁·科斯塔
马丁·科斯塔网站大照片背景
戴维迪雅室内
家具室内设计工作室网站
互联网营销设计品牌代理网站
丹尼尔·菲尔（Daniel Filler）
Daniel Filler网站作品集布局
惠特曼斯
纽约市汉堡店网站布局
蒂姆·鲁西莱（Tim Roussilhe）
Tim Roussilhe网站大照片背景设计
互动标签
大视频背景效果TAG代理网站
安娜·萨弗龙奇克（Anna Safroncik）
Anna Safroncik个人网站布局大照片背景
DOJO工作室
德国设计工作室代理商网站布局
烛光
设计工作室代理网站布局
创意人
创意人工作室设计网站代理
十二餐厅
餐厅食品酒吧烹饪晚餐网站布局
de Certeau＆Associates
建筑网站布局工作室机构大照片
Medis Food＆Bar
美食餐厅网站布局大图背景
严工作室
全屏大网站背景图片严设计机构
理发师
经典复古摄影背景网页设计Blind Barber
反思婚礼
婚礼欧洲网站布局大摄影
CGRendering
建筑网站工作室代理机构组合
雪莉·桑德泽
Shelley网站Sandzer餐厅大照片布局
马库斯·托马斯（Marcus Thomas）
创意设计机构网站布局大照片
比亚马尔2012
时装工作室设计网站大照片背景
激发
Inzeit网站工作室移动零售布局
闪电战
旧金山加利福尼亚闪电战设计工作室网站
Au Petit Panisse
高档餐厅面包店布局，法国小潘尼斯2012
Ringve Media
Ringve Media网站布局大照片背景中国
邵逸夫摄影
邵氏摄影网站布局大照片背景
Werkstette
Werkstette网站布局大照片背景CSS HTML
盐冲浪
零售网站布局盐冲浪加州海洋
巴勃罗·冈萨雷斯（PabloGonzález）
帕勃罗·冈萨雷斯个人网站总监
大卫·穆列特（David Mullett）
David Mullett作品集图片网站布局
莫西·索佐（Moxie Sozo）
moxie sozo网站布局大照片背景
大卫·诺兰
David Nolan纽约摄影作品集
弗莱克
Flaek鞋类网站布局设计大背景
比萨
意大利Pizzaza网站布局大照片背景灵感
500瓦
设计工作室代理商网站布局500watt
海豚交流
海豚设计工作室网站代理商背景图片
顶级美元摄影师
顶级美元摄影师网站布局设计创意
顶级美元模型
代理商建模Top Dollar Models网站布局
丽贝卡·巴里（Rebecca Barry）
作家兼电影导演丽贝卡·巴里（Rebecca Barry）网站布局2012
治愈历史
Healing Histories网站新奥尔良信息布局
巨人运动服
巨人体育体育网站设计大照片背景
边际体育局
Onside Sports Agency网站Studio经典
杰森·米勒（Jason Miller）
Jason Miller Studio Webste布局设计创意
展示广告
Italy Display Creative Agency工作室网站布局
伊内斯·帕佩特
大照片背景网站布局ines papert
空中漫步
Airwalk滑板品牌设计网站的布局
哈斯·布朗滕
Hasse Bronten网站喜剧演员德国背景图片CSS
伊内斯·玛丽亚·加姆勒
纯粹的娱乐设计Ines Maria Gamler网站布局
杀手旅
网上商店衣服时尚网站布局大照片背景
35毫米设计
35mm设计工作室大照片背景网站布局
春夏
春夏季网站布局设计灵感
桑德伍德家园
桑德伍德室内住宅网站产品组合布局
马特·波特菲尔德
马特·波特菲尔德摄影作品集网站布局
ASAA体系结构
asaa建筑室内设计网站布局工作室
艾耶·维尔尼斯
Ayer Viernes网站投资组合机构背景图片
啊阿索卡多
