您當(dāng)前位置:圖趣網(wǎng)(Tuquu) >> 網(wǎng)頁(yè)設(shè)計(jì)教程 >> 交互設(shè)計(jì) >> 瀏覽設(shè)計(jì)教程

從Medium網(wǎng)頁(yè)大背景講述網(wǎng)頁(yè)前端知識(shí)

Medium是由Twitter的聯(lián)合創(chuàng)始人:Evan Williams和Biz Stone創(chuàng)辦于2012年8月創(chuàng)辦的一個(gè)文章寫作、閱讀平臺(tái)。注意,我這里并沒有用很多網(wǎng)站上援引的博客平臺(tái)是因?yàn)镸edium的出現(xiàn)塑造了一種新的社會(huì)化自我營(yíng)銷渠道。在首頁(yè)引入的Welcome to Medium里,我們看到它的初衷是為了讓人們更好地寫作,但是作為Twitter的一個(gè)延伸,它依舊搭載在一個(gè)社交性很強(qiáng)的平臺(tái)之上。這也讓在Medium中寫作的人更愿意去分享、營(yíng)銷、推廣自己的寫作內(nèi)容,甚至成為一些知名Developers, Designers and even Managers的發(fā)布渠道。例如:Facebook的Product Design Director Julie Zhuo就曾經(jīng)通過(guò)在Medium上發(fā)表文章來(lái)解釋Facebook為何revert掉在視覺層面上非常突出的新版界面。而更讓人覺得特別的是,每當(dāng)我看到好的文章分享到twitter上時(shí),都會(huì)有作者親自來(lái)favorite你的tweet,這簡(jiǎn)直就是自我運(yùn)營(yíng)啊,有木有! 好啦,閑話說(shuō)完,我們進(jìn)入主題。

首頁(yè)布局

Medium Home大背景圖或是視頻,已經(jīng)成為累當(dāng)今服務(wù)性網(wǎng)站設(shè)計(jì)的一個(gè)趨勢(shì),隨著網(wǎng)速越來(lái)越快、屏幕越來(lái)越大,一張巨幅首頁(yè)圖片無(wú)論從視覺沖擊力還是從性能上都已經(jīng)不再是不可能實(shí)現(xiàn)的功能。那我們來(lái)看一下這個(gè)首頁(yè)的布局是如何實(shí)現(xiàn)的: HTML:

	<div class="container surface-container" id="container">
  <div class="surface" id="..." style="display: block; visibility: visible;">
    ::before
    <div class="screen-content surface-content">
      <div class="image-fill layout-fill promo-fill" style="background-image: url('xxx.jpeg')">
        <div class="layout-fill align-middle">
          ::before
          <div class="align-block layout-fill-width">
            <div class="layout-single-column">...</div>
            <div class="align-center">...</div>
          </div>
          <footer class="footer ..."></footer>
        </div>
      </div>
    </div>
    ::after
  </div>
</div>

CSS: 為了實(shí)現(xiàn)全window的覆蓋,第一個(gè)要做的就是設(shè)置html, bodyheight為100%,寬度的話,應(yīng)為是自動(dòng)全覆蓋,就無(wú)需多做設(shè)置。.container只是作為一個(gè)過(guò)度,同樣設(shè)置到100%的高度(這里我會(huì)暫時(shí)忽略除了layout之外的屬性設(shè)置)。 再深一層是便是.surface,除了再次繼承了滿高度、滿寬度外,還定義了box-sizing: border-box;,請(qǐng)移位MDN來(lái)理解。這里要注意它加了.suface:before, .surface:after的屬性,是為了自動(dòng)生成clearfix的效果來(lái)阻止float溢出,但其實(shí)在這個(gè)首頁(yè)之中并沒有用到。

	html, body, .container {
  height: 100%;
}
.surface {...}
.surface:before, .surface:after {
  display: table;
  content: " ";
}
.surface:after {
  clear: both;
}

在往里面的幾個(gè).screen-content, .surface-content只是繼續(xù)控制高度,和一些默認(rèn)背景顏色。直到下面這一層才定義了覆蓋整個(gè)背景大圖的屬性,而具體的背景圖片是只額姐加到了DOM的這個(gè)div里面(我想原因應(yīng)該是有一些數(shù)據(jù)binding在里面,這樣好做更新):

	.image-fill, {
  background-position: center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
.image-fill {
  background-color: rgba(0, 0, 0, 0.9);
}
.promo-fill {
  background-color: #000;
}

大背景圖

在這里,為了實(shí)現(xiàn)圖片可以滿背景覆蓋,最主要的一個(gè)元素就是background-size: cover;,這個(gè)屬性一共有以下幾個(gè)可能的值:

background-size: <length> | <percentage> | auto | cover | contain;

它們分別代表的意思是:

  1. background-size: 50% | 120px | auto; 設(shè)置了背景圖片的寬度,高度則自動(dòng)計(jì)算。默認(rèn)的auto維持了背景圖原有的大小。
  2. background-size: 50% auto; 同時(shí)強(qiáng)制定義了寬度和高度。
  3. background-size: auto, auto, [...]; 定義給多個(gè)背景圖片(注意被一個(gè)定義會(huì)用逗號(hào)隔開,與auto auto并不是一個(gè)意思)。
  4. background-size: cover; 這樣定義的背景圖片會(huì)被修改圖片大小(長(zhǎng)寬比例不變),以確保剛剛好覆蓋整個(gè)Element。
  5. background-size: contain; 背景圖片會(huì)被修改大?。ㄩL(zhǎng)寬比例不變),以確保剛剛好被這個(gè)Element包裹在里面。

下面幾張圖分別展示了集中不同的情況: 當(dāng)background-size設(shè)置為cover時(shí),即使屏幕被拉窄拉寬,圖片依舊很好地覆蓋著整個(gè)屏幕(更多的比對(duì)還可以訪問(wèn)MDN): home cover

contain時(shí),圖片長(zhǎng)寬比并不發(fā)生變化,卻會(huì)被包在window里面:

home contain

50% 100%時(shí),圖片長(zhǎng)寬比按照設(shè)置的數(shù)值被拉伸:

home 50% 100%

注意,這里的背景圖片都是按照默認(rèn)的會(huì)重復(fù)鋪排在x和y軸上,所以當(dāng)背景圖不能覆蓋element的時(shí)候,便會(huì)出現(xiàn)重復(fù)的樣式。此外,background-position: center;也定義了圖片按照所屬element的中心位置來(lái)調(diào)整大小。

兼容性

這樣圖片全頁(yè)面覆蓋的實(shí)現(xiàn)方法就說(shuō)明完了,contain & cover屬性的兼容性如下:

  1. Chrome 3.0+
  2. Firefox 3.6 (1.9.2)+
  3. IE 9.0+
  4. Opera 10.0+
  5. Safari 4.1+

如果為了實(shí)現(xiàn)同樣的效果,卻要面對(duì)恐怖的IE7/8,腫么破,請(qǐng)嘗試如下:

	.background-cover {
  filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(
          src='PATH_TO_BACKGROUND_IMAGE',
          sizingMethod='scale');
  -ms-filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(
              src='PATH_TO_BACKGROUND_IMAGE',
              sizingMethod='scale');
}

但是要小心,這個(gè)實(shí)現(xiàn)方法會(huì)使得起內(nèi)部的鏈接點(diǎn)擊失效(請(qǐng)給我大MS 32個(gè)贊),而且這個(gè)實(shí)現(xiàn)的是background-size: 100% 100%的效果?;蛘呖梢酝ㄟ^(guò)jQuery (jquery.backgroundSize.js)來(lái)實(shí)現(xiàn)。


其他示例

這里面是一些好看的大圖覆蓋的例子,但是并不是所有的頁(yè)面都是通過(guò)background-size來(lái)實(shí)現(xiàn)的:

[教程作者:admin]
免責(zé)聲明:本站文章系圖趣網(wǎng)整理發(fā)布,如需轉(zhuǎn)載,請(qǐng)注明出處,素材資料僅供個(gè)人學(xué)習(xí)與參考,請(qǐng)勿用于商業(yè)用途!
本文地址:http://m.likemindfilms.com/tutorial/id2044.html
手機(jī)互動(dòng)網(wǎng)頁(yè)項(xiàng)目設(shè)計(jì)總結(jié)(下)
作為網(wǎng)頁(yè)設(shè)計(jì)師必須知道的20種新興交互設(shè)計(jì)
圖趣網(wǎng)微信
建議反饋
×