石家莊網(wǎng)站設(shè)計與建設(shè)Web設(shè)計中的大背景圖像：提示和示例 在本文中，我想總結(jié)一些可靠的技術(shù)來構(gòu)建大型的，超大的背景圖像。這可以通過基本的CSS3 / CSS2技術(shù)或使用一些開源的第三方j(luò)Query插件來實現(xiàn)。沒有正確或錯誤的答案，只有較舊的舊版瀏覽器提供不同級別的支持。
深入研究鉚接開發(fā)技術(shù)的這一集合，看看可以將它們整合在一起。
CSS交易技巧
為了使我們?nèi)腴T，我想介紹一下在CSS Tricks上發(fā)布的非常有用的文章，其中概述了許多想法。具有最大支持水平的最簡單解決方案是通過CSS技術(shù)。我發(fā)現(xiàn)CSS3方法可以在大多數(shù)常見的瀏覽器中正常工作，甚至還有處理舊版本Internet Explorer的技巧。
讓我們看一下CSS3代碼，以將這些背景圖片全部以100％的響應(yīng)寬度放置。我將使用Chris Coyeir的文章中的代碼來說明實現(xiàn)起來的難易程度。
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元素比主體要容易得多，因為我們知道所有內(nèi)容都包裹在其中。然后，我們以完整的中心位置應(yīng)用背景圖像，沒有重復(fù)并在滾動時固定。較新的CSS3 background-size屬性適用于所有定位魔術(shù)。利用許多供應(yīng)商前綴也將為我們提供更廣泛的支持。
應(yīng)該注意的是，過濾器屬性在IE中并不總是很好。有人報告滾動條或在頁面上選擇文本時出現(xiàn)問題。要解決此錯誤，您可以嘗試將背景圖像代碼應(yīng)用到體內(nèi)的內(nèi)部div，并將其設(shè)置為全100％的width / height。
CSS2后備
石家莊網(wǎng)站設(shè)計與建設(shè)令人驚訝的是，我發(fā)現(xiàn)比其他任何樣式都更多的瀏覽器支持CSS3方法。但是我仍然會在img元素上使用常規(guī)CSS屬性來提供此輔助方法。我覺得此方法的最大細微差別在于，當右鍵單擊背景時，它將彈出上下文菜單，就像您單擊圖像而不是單擊網(wǎng)頁一樣。對于無法弄清楚菜單為何不同的訪問者，這可能會很煩人。但是，如果您在努力使用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之前，圖像標簽應(yīng)直接位于您體內(nèi)。圖像將掉入背景，所有其他內(nèi)容都應(yīng)環(huán)繞。眾所周知，此功能可在所有主要瀏覽器（Safari / Firefox / Chrome / Opera）中使用，但在IE6-7中并不完全支持。
JavaScript解決方案
讓我們進入使用jQuery插件而不是典型CSS的更具動態(tài)性的代碼。這些在編寫時通常會考慮到靈活性，因此移動智能手機和響應(yīng)式布局應(yīng)放在第一位。jQuery也是一種相當通用的語言，大多數(shù)Web開發(fā)人員對此有些熟悉。
可能有數(shù)十種jQuery插件可供選擇，但我將介紹我的三個收藏夾。這些代碼庫中的大多數(shù)都非常容易在新網(wǎng)站中實現(xiàn)和設(shè)置。它們?nèi)客泄茉贕ithub上，因此提供了一個出色的開源解決方案。這意味著隨著更多的開發(fā)人員將他們的知識貢獻于每個插件的代碼庫，您可以期望更少的錯誤和更多的支持。
反拉伸
石家莊網(wǎng)站設(shè)計與建設(shè)一些開發(fā)人員已經(jīng)看到Backstretch這個名字出現(xiàn)在其他網(wǎng)站和博客文章中。這是一個非常受歡迎的插件，自2009年12月以來已經(jīng)存在了將近3年。開發(fā)人員一直在急切地更新此插件，現(xiàn)在它甚至支持圖像幻燈片以及靜態(tài)背景圖像。
要自己實施代碼，只需下載腳本的副本，然后使用腳本標簽將其附加到您的網(wǎng)頁即可。如果要使用CDN云托管，請嘗試使用此cdnjs鏈接。然后，我們只需要打開另一個腳本標簽，然后像這樣輸入一行jQuery代碼即可：
1個
$.backstretch("https://assets.hongkiat.com/uploads/oversized-background-image-design/bg.jpg");
演示版
代碼庫被編寫為單行執(zhí)行。這使得Backstretch對于非技術(shù)性Web開發(fā)人員來說都非常容易上手。您將不需要應(yīng)用任何額外的HTML標記或其他CSS屬性。并且圖像將對瀏覽器窗口做出100％響應(yīng)。
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});
上面的代碼做了些微改動，以在后臺支持幻燈片播放。您可以列出要在幻燈片內(nèi)顯示的圖像位置，然后再列出兩位元數(shù)據(jù)。持續(xù)時間值是幻燈片之間的時間量，以毫秒為單位。第二個淡入度值將確定從一個圖像淡入另一個圖像所需的毫秒數(shù)。
維加斯
在拉斯維加斯的背景jQuery插件是誰正在尋找一種快速實現(xiàn)網(wǎng)頁開發(fā)者一個極好的選擇。讓Vegas脫穎而出的原因在于，您有更多的背景自定義選項。實際上，可以使用照片頂部的條紋或圓點設(shè)置疊加效果?？梢栽赩egas文檔設(shè)置頁面上看到一個演示，該頁面使用有斑點的疊加效果。
您將需要包括在Github頁面上找到的Vegas JS和CSS文件的副本。該插件僅使用一行代碼即可工作，但是與Backstretch相比，有很多可能的自定義項?，F(xiàn)在，讓我們用代碼構(gòu)建一個簡單的演示示例：
1個
2
3
$.vegas({
src:'/img/background.jpg'
});
演示版
信不信由你，我們也可以僅使用一行代碼或一行代碼來獲得與以前相同的效果。如果您要構(gòu)建圖像幻燈片或添加任何疊加紋理，Vegas允許進一步自定義。在疊加文檔頁面上，您會注意到一系列模式樣本，可以在此處進行演示。與其他jQuery插件相比，這是使用Vegas進行圖像疊加的好處的一個很好的例子。
任何伸展
我最后的jQuery解決方案是一個名為Anystretch的插件，它實際上是Backstretch插件的分支。有一些細微的差異可以幫助開發(fā)人員尋求更新背景圖像或?qū)G應(yīng)用于各種頁面元素。
這個腳本與之前需要jQuery副本和anystretch文件副本的方式相同。然后，按照我在下面設(shè)置的語法，將其放置在另一組標記中。請注意，速度參數(shù)決定了圖像在完成加載后褪色的速度，以毫秒為單位。
1個
$.anystretch("https://assets.hongkiat.com/uploads/oversized-background-image-design/bg.jpg", {speed: 150});
現(xiàn)場演示
這種方法也可以完美地處理div或體內(nèi)其他元素。每張BG照片仍將以適當?shù)膶捀弑日{(diào)整大小，并在移動瀏覽器上顯示為完全響應(yīng)。下面的演示代碼將背景圖片放在ID為的div上#leftbox。
1個
$('#leftbox').anystretch("https://assets.hongkiat.com/uploads/oversized-background-image-design/bg.jpg", {speed: 150});
最終的解決方案？
最終，我們生活在一個為語義Web問題提供多種解決方案的時代。前端開發(fā)人員一直在努力尋求更多支持，并找出新的瀏覽器黑客。對于有興趣將這些技術(shù)快速應(yīng)用于網(wǎng)頁布局的設(shè)計師社區(qū)而言，這是完美的選擇。
我無法具體告知最佳解決方案，因為它會隨每個網(wǎng)站而變化。但是我仍然是HTML5 / CSS3的擁護者，并且我認為第一個CSS3解決方案足以滿足任何現(xiàn)代網(wǎng)站的需求。盡管公認的是，許多jQuery插件都能完美運行，甚至在不了解CSS3屬性的瀏覽器中也將支持它們。
最后，一切都取決于您自己的選擇，您認為最適合該項目。測試2到3個您的收藏夾，看看哪個在人群中脫穎而出。
網(wǎng)站背景過大的示例
除了上述方法，我還想提供一些設(shè)計靈感的示例。Web設(shè)計人員通常熟悉大型背景布局，但是很難記住一些確切的域名。
在這個展示柜中，我整理了60多個使用超大背景圖片的網(wǎng)站示例。查看布局樣式，看看如何在自己的項目中模仿類似的技術(shù)。
Hiut牛仔布
Hiut Denim網(wǎng)站設(shè)計公司
凱雷姆·蘇爾
舊金山自由設(shè)計師Kerem網(wǎng)站
槍與玫瑰
Guns n Roses樂隊音樂網(wǎng)站的照片
藝術(shù)
工作設(shè)計產(chǎn)品品牌工作室網(wǎng)站布局
卡耶納代理
辣椒網(wǎng)站布局攝影
斯德哥爾摩設(shè)計院
室內(nèi)設(shè)計斯德哥爾摩瑞典網(wǎng)站布局
馬丁·科斯塔
馬丁·科斯塔網(wǎng)站大照片背景
戴維迪雅室內(nèi)
家具室內(nèi)設(shè)計工作室網(wǎng)站
互聯(lián)網(wǎng)營銷設(shè)計品牌代理網(wǎng)站
丹尼爾·菲爾（Daniel Filler）
Daniel Filler網(wǎng)站作品集布局
惠特曼斯
紐約市漢堡店網(wǎng)站布局
蒂姆·魯西萊（Tim Roussilhe）
Tim Roussilhe網(wǎng)站大照片背景設(shè)計
互動標簽
大視頻背景效果TAG代理網(wǎng)站
安娜·薩弗龍奇克（Anna Safroncik）
Anna Safroncik個人網(wǎng)站布局大照片背景
DOJO工作室
德國設(shè)計工作室代理商網(wǎng)站布局
燭光
設(shè)計工作室代理網(wǎng)站布局
創(chuàng)意人
創(chuàng)意人工作室設(shè)計網(wǎng)站代理
十二餐廳
餐廳食品酒吧烹飪晚餐網(wǎng)站布局
de Certeau＆Associates
建筑網(wǎng)站布局工作室機構(gòu)大照片
Medis Food＆Bar
美食餐廳網(wǎng)站布局大圖背景
嚴工作室
全屏大網(wǎng)站背景圖片嚴設(shè)計機構(gòu)
理發(fā)師
經(jīng)典復(fù)古攝影背景網(wǎng)頁設(shè)計Blind Barber
反思婚禮
婚禮歐洲網(wǎng)站布局大攝影
CGRendering
建筑網(wǎng)站工作室代理機構(gòu)組合
雪莉·桑德澤
Shelley網(wǎng)站Sandzer餐廳大照片布局
馬庫斯·托馬斯（Marcus Thomas）
創(chuàng)意設(shè)計機構(gòu)網(wǎng)站布局大照片
比亞馬爾2012
時裝工作室設(shè)計網(wǎng)站大照片背景
激發(fā)
Inzeit網(wǎng)站工作室移動零售布局
閃電戰(zhàn)
舊金山加利福尼亞閃電戰(zhàn)設(shè)計工作室網(wǎng)站
Au Petit Panisse
高檔餐廳面包店布局，法國小潘尼斯2012
Ringve Media
Ringve Media網(wǎng)站布局大照片背景中國
邵逸夫攝影
邵氏攝影網(wǎng)站布局大照片背景
Werkstette
Werkstette網(wǎng)站布局大照片背景CSS HTML
鹽沖浪
零售網(wǎng)站布局鹽沖浪加州海洋
巴勃羅·岡薩雷斯（PabloGonzález）
帕勃羅·岡薩雷斯個人網(wǎng)站總監(jiān)
大衛(wèi)·穆列特（David Mullett）
David Mullett作品集圖片網(wǎng)站布局
莫西·索佐（Moxie Sozo）
moxie sozo網(wǎng)站布局大照片背景
大衛(wèi)·諾蘭
David Nolan紐約攝影作品集
弗萊克
Flaek鞋類網(wǎng)站布局設(shè)計大背景
比薩
意大利Pizzaza網(wǎng)站布局大照片背景靈感
500瓦
設(shè)計工作室代理商網(wǎng)站布局500watt
海豚交流
海豚設(shè)計工作室網(wǎng)站代理商背景圖片
頂級美元攝影師
頂級美元攝影師網(wǎng)站布局設(shè)計創(chuàng)意
頂級美元模型
代理商建模Top Dollar Models網(wǎng)站布局
麗貝卡·巴里（Rebecca Barry）
作家兼電影導(dǎo)演麗貝卡·巴里（Rebecca Barry）網(wǎng)站布局2012
治愈歷史
Healing Histories網(wǎng)站新奧爾良信息布局
巨人運動服
巨人體育體育網(wǎng)站設(shè)計大照片背景
邊際體育局
Onside Sports Agency網(wǎng)站Studio經(jīng)典
杰森·米勒（Jason Miller）
Jason Miller Studio Webste布局設(shè)計創(chuàng)意
展示廣告
Italy Display Creative Agency工作室網(wǎng)站布局
伊內(nèi)斯·帕佩特
大照片背景網(wǎng)站布局ines papert
空中漫步
Airwalk滑板品牌設(shè)計網(wǎng)站的布局
哈斯·布朗滕
Hasse Bronten網(wǎng)站喜劇演員德國背景圖片CSS
伊內(nèi)斯·瑪麗亞·加姆勒
純粹的娛樂設(shè)計Ines Maria Gamler網(wǎng)站布局
殺手旅
網(wǎng)上商店衣服時尚網(wǎng)站布局大照片背景
35毫米設(shè)計
35mm設(shè)計工作室大照片背景網(wǎng)站布局
春夏
春夏季網(wǎng)站布局設(shè)計靈感
桑德伍德家園
桑德伍德室內(nèi)住宅網(wǎng)站產(chǎn)品組合布局
馬特·波特菲爾德
馬特·波特菲爾德攝影作品集網(wǎng)站布局
ASAA體系結(jié)構(gòu)
asaa建筑室內(nèi)設(shè)計網(wǎng)站布局工作室
艾耶·維爾尼斯
Ayer Viernes網(wǎng)站投資組合機構(gòu)背景圖片
啊阿索卡多
