適應(yīng)手機(jī)瀏覽的網(wǎng)站設(shè)計(jì)如何添加響應(yīng)式背景圖像

2022-05-20 分類(lèi)：網(wǎng)站設(shè)計(jì)

看看今天流行的網(wǎng)站設(shè)計(jì)，你肯定會(huì)看到的一個(gè)滿(mǎn)屏圖片背景的現(xiàn)象，因?yàn)閳D片在網(wǎng)站設(shè)計(jì)中的應(yīng)用已經(jīng)愈加廣泛。不同于十幾年前，網(wǎng)站建設(shè)只需要考慮PC端瀏覽即可，移動(dòng)端已經(jīng)逐漸成為網(wǎng)站用戶(hù)訪問(wèn)的主流。所以學(xué)會(huì)適應(yīng)手機(jī)瀏覽的網(wǎng)站設(shè)計(jì)如何添加響應(yīng)式背景圖像，將變的越來(lái)越重要，作為高端網(wǎng)站建設(shè)公司，甚至一名專(zhuān)業(yè)的網(wǎng)站設(shè)計(jì)制作開(kāi)發(fā)人員，你不得不掌握這門(mén)全新的技術(shù)。添加這些圖片的挑戰(zhàn)之一來(lái)自好實(shí)踐，即網(wǎng)站必須響應(yīng)不同的屏幕大小和設(shè)備，這種方法被稱(chēng)為響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)，這也是本文討論的主題。

一幅多屏圖像

由于您的網(wǎng)站的布局變化和縮放與不同的屏幕大小，所以這些背景圖像也必須相應(yīng)地縮放它們的大小。事實(shí)上，這些“流暢的圖像”是響應(yīng)網(wǎng)站的關(guān)鍵部分之一(以及流暢的網(wǎng)格和媒體查詢(xún))。這三個(gè)部分從一開(kāi)始就是響應(yīng)性網(wǎng)頁(yè)設(shè)計(jì)的主要部分，但是盡管向站點(diǎn)添加響應(yīng)性?xún)?nèi)聯(lián)圖像一直相當(dāng)容易(內(nèi)聯(lián)圖像是作為HTML標(biāo)記的一部分編碼的圖形)，對(duì)背景圖像(使用CSS背景屬性設(shè)置頁(yè)面樣式)也是如此，長(zhǎng)期以來(lái)，這給許多Web設(shè)計(jì)人員和前端開(kāi)發(fā)人員帶來(lái)了巨大的挑戰(zhàn)。值得慶幸的是，CSS中增加了“后臺(tái)大小”屬性，這使得這一點(diǎn)成為可能。

在另一篇文章中，我們介紹了如何使用CSS3屬性背景大小來(lái)拉伸圖像以適應(yīng)窗口，但是還有一種更好、更有用的方法來(lái)部署此屬性。為此，我們將使用以下屬性和值組合：

background-size: cover;

Cover關(guān)鍵字屬性告訴瀏覽器縮放圖像以適合窗口，無(wú)論該窗口有多大或多小。圖像將縮放以覆蓋整個(gè)屏幕，但原始比例和縱橫比保持不變，以防止圖像本身被扭曲。圖像將盡可能大地放置在窗口中，以便覆蓋整個(gè)窗口曲面。這意味著您的頁(yè)面中不會(huì)有任何空白點(diǎn)或圖像上的任何失真，但也意味著某些圖像可能會(huì)根據(jù)屏幕和有問(wèn)題的圖像的寬高比進(jìn)行修剪。例如，圖像的邊緣(頂部、底部、左側(cè)或右側(cè))可能會(huì)在圖像上被切斷，具體取決于用于“背景位置”特性的值。如果將背景設(shè)置為“左上方”，則圖像上的任何多余部分都將從底部和右側(cè)消失。如果你使背景圖像居中，多余的部分將從所有的側(cè)面消失，但是由于多余的部分被分散開(kāi)來(lái)，對(duì)任何一側(cè)的影響都會(huì)減少。

如何設(shè)置COVER大小

創(chuàng)建背景圖像時(shí)，最好創(chuàng)建一個(gè)相當(dāng)大的圖像。雖然瀏覽器可以使圖像變小而不會(huì)對(duì)視覺(jué)質(zhì)量產(chǎn)生明顯影響，但當(dāng)瀏覽器將圖像放大到比原始尺寸更大的尺寸時(shí)，圖像的視覺(jué)質(zhì)量將會(huì)下降，變得模糊和像素化。這樣做的缺點(diǎn)是，當(dāng)您將巨幅圖像傳送到所有屏幕時(shí)，頁(yè)面的性能會(huì)受到影響。當(dāng)您這樣做時(shí)，請(qǐng)確保為下載速度和網(wǎng)絡(luò)傳輸做好適當(dāng)?shù)臏?zhǔn)備。最后，您需要在足夠大的圖像大小和質(zhì)量與合理的文件大小之間找到適合的下載速度。

使用縮放背景圖像的常用方法之一是，當(dāng)您希望該圖像占用頁(yè)面的整個(gè)背景時(shí)，無(wú)論該頁(yè)面是寬的、在臺(tái)式機(jī)上查看的，還是小得多的，并且正在發(fā)送到手持移動(dòng)設(shè)備。

將圖像上載到網(wǎng)站主機(jī)，并將其作為背景圖像添加到CSS中：

background-image: url(fireworks-over-wdw.jpg);
background-repeat: no-repeat;
background-position: center center;
background-attachment: fixed;

首先添加瀏覽器前綴CSS：

-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;

然后添加CSS屬性：

background-size: cover;

使用適合不同設(shè)備的不同圖像。

雖然桌面或筆記本電腦體驗(yàn)的響應(yīng)性設(shè)計(jì)很重要，但可以訪問(wèn)Web的設(shè)備種類(lèi)已顯著增加，隨之而來(lái)的還有更多不同的屏幕大小。如前所述，例如，在智能手機(jī)上加載一個(gè)非常大的響應(yīng)式背景圖像，并不是一個(gè)高效或注重帶寬的設(shè)計(jì)。了解如何使用媒體查詢(xún)來(lái)提供適合于將在其上顯示的設(shè)備的圖像，并進(jìn)一步提高您的網(wǎng)站與移動(dòng)設(shè)備的兼容性。

分享標(biāo)題：適應(yīng)手機(jī)瀏覽的網(wǎng)站設(shè)計(jì)如何添加響應(yīng)式背景圖像
鏈接地址：http://muchs.cn/news21/155521.html

網(wǎng)站建設(shè)、網(wǎng)絡(luò)推廣公司-創(chuàng)新互聯(lián)，是專(zhuān)注品牌與效果的網(wǎng)站制作，網(wǎng)絡(luò)營(yíng)銷(xiāo)seo公司；服務(wù)項(xiàng)目有網(wǎng)站設(shè)計(jì)等

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶(hù)投稿、用戶(hù)轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容