CSS, CSS3, 網頁設計

CSS教學-CSS3 全螢幕背景屬性contain與cover差別

梅干2012/10/16
梅問題-CSS3教學-CSS3全螢幕背景屬性Contain與Cover差別
  先前曾分享,透過CSS3內的屬性,在不用寫任何的程式碼,就可完成全背景縮放的效果「CSS3實現自動縮放全螢幕背景」 ,以往這都需要透過js來作判斷與計算,才能將圖片縮到指定的範圍內,現在透過CSS3的屬性設定後,自動就會依照區塊進行縮放,但在全螢幕背景的屬性中,有二個設定值可作控制,分別為Contain、Cover,雖然都是全螢幕背景,效果卻大不同,現在就一塊來看看二者的差異吧!

background-size: contain;
contain:依照原來的比例,等比的縮放到指定的元素的尺寸中。

#範例預覽:
當設成contain,底圖就會依照區塊的大小,等比縮放到區塊中,這邊不滿的地方則會留白。
梅問題-CSS3教學-CSS3全螢幕背景屬性Contain與Cover差別
background-size: cover;
cover:無論如何,都會將畫面居中撐滿。

#範例預覽:
由於區塊比例與圖片不同時,當畫面撐滿時,有些地方則會被卡掉。
梅問題-CSS3教學-CSS3全螢幕背景屬性Contain與Cover差別
[範例預覽] [範例下載]
UAG軍規iPhone防摔殼