CSS3之背景尺寸Background-size使用介紹
發(fā)布時間：2013-10-14 15:37:28 作者：佚名 
我要評論
我要評論CSS3背景尺寸Background-size，這個屬性是改變背景尺寸的通過各種不同是屬性值改變背景尺寸呈現(xiàn)的大小，下面為大家詳細(xì)介紹下其語法、瀏覽器兼容及使用示例，感興趣的朋友不要錯過
CSS3之背景尺寸Background-size是CSS3中新加的一個有關(guān)背景的屬性，這個屬性是改變背景尺寸的通過各種不同是屬性值改變背景尺寸呈現(xiàn)的大小。下面就想來看下有關(guān)CSS3 之背景尺寸Background-size的介紹吧。
一、Background-size的語法
1、Background-size的語法
復(fù)制代碼
代碼如下:background-size: auto(原始圖片大小) || number(數(shù)值) || percentage(百分比) || cover(放大鋪滿) || contain(縮小鋪滿)
2、Background-size的屬性值
1、auto：此值為默認(rèn)值，保持背景圖片的原始高度和寬度;
2、number：此值設(shè)置具體的值，可以改變背景圖片的大小;
3、percentage：此值為百分值，可以是0%〜100%之間任何值，但此值只能應(yīng)用在塊元素上，所設(shè)置百分值將使用背景圖片大小根據(jù)所在元素的寬度的百分比來計算。
4、cover：此值是將圖片放大，以適合鋪滿整個容器，這個主要運(yùn)用在，當(dāng)圖片小于容器時，又無法使用background-repeat來實(shí)現(xiàn)時，我們就可以采用cover;將背景圖片放大到適合容器的大小，但這種方法會使用背景圖片失真;
5、contain：此值剛好與cover相反，其主要是將背景圖片縮小，以適合鋪滿整個容器，這個主要運(yùn)用在，當(dāng)背景圖片大于元素容器時，而又需要將背景圖片全部顯示出來，此時我們就可以使用contain將圖片縮小到適合容器大小為止，這種方法同樣會使用圖片失真。
當(dāng)background-size取值為number和percentage時可以設(shè)置兩個值，也可以設(shè)置一個值，當(dāng)只取一個值時，第二個值相當(dāng)于auto，但這里的auto并不會使背景圖片的高度保持自己原始高度，而會與第一個值相同。
二、Background-size的兼容
1、Background-size的兼容情況
2、Background-size的兼容寫法
復(fù)制代碼
代碼如下:/*Mozilla*/
-moz-background-size: auto(原始圖片大小) || number(數(shù)值) || percentage(百分比) || cover(放大鋪滿) || contain(縮小鋪滿)
/*Webkit*/
-webkit-background-size: auto(原始圖片大小) || number(數(shù)值) || percentage(百分比) || cover(放大鋪滿) || contain(縮小鋪滿)
/*Oprea*/
-o-background-size: auto(原始圖片大小) || number(數(shù)值) || percentage(百分比) || cover(放大鋪滿) || contain(縮小鋪滿)
/*W3c標(biāo)準(zhǔn)*/
background-size: auto(原始圖片大小) || number(數(shù)值) || percentage(百分比) || cover(放大鋪滿) || contain(縮小鋪滿)
三、Background-size的例子(在谷歌瀏覽器下看喲)
1、圖片放大縮小
CSS代碼：
復(fù)制代碼
代碼如下:.box{width:300px;height:300px;background:url("http://www.leemagnum.com/img/sizeA.png") no-repeat center; border:1px solid #000;
-webkit-transition:1s all linear;
background-size:20px 20px;
}
.box:hover{
background-size:200px 200px;
}
HTML代碼：
復(fù)制代碼
代碼如下:<div class="box"></div>
預(yù)覽效果：
(1)初始狀態(tài)：
(2)hover的狀態(tài)：
2、圖片contain和cover的效果
CSS代碼：
復(fù)制代碼
代碼如下:.box{width:300px;height:300px;background:url("http://www.leemagnum.com/img/sizeA.png") no-repeat center; border:1px solid #000;
-webkit-transition:1s all linear;
background-size:cover;
}
.box:hover{
background-size:contain;
}
HTML代碼：
復(fù)制代碼
代碼如下:<div class="box"></div>
預(yù)覽效果：
(1)初始狀態(tài)：
(2)hover的狀態(tài)
CSS3之背景尺寸Background-size就為大家介紹到這里了，很簡單的小屬性，這只是CSS3新加的背景屬性之一，更多有關(guān)CSS3的小屬性盡在夢龍小站，跟多有關(guān)CSS3的其他內(nèi)容歡迎大家關(guān)注夢龍小站有關(guān)CSS3的更新。
相關(guān)文章
CSS3實(shí)現(xiàn)多背景模擬動態(tài)邊框的效果
前幾天在工作的時候遇到一個問題，項目需要實(shí)現(xiàn)一個效果，當(dāng)鼠標(biāo)移入一個元素的時候，元素出現(xiàn)一個動態(tài)的邊框，通過網(wǎng)上查找資料看到有人推薦可以使用Css3來實(shí)現(xiàn)，后來試了2016-11-08CSS3點(diǎn)擊按鈕實(shí)現(xiàn)背景漸變動畫效果
這篇文章給大家介紹的是，利用CSS3實(shí)現(xiàn)當(dāng)點(diǎn)擊按鈕的時候，按鈕的背景是漸變動畫的效果，實(shí)現(xiàn)后的效果非常好，開發(fā)的時候利用這種效果的按鈕會給用戶一種非常酷炫的感受，感2016-10-19- 這篇文章主要介紹了CSS3條紋背景制作的實(shí)戰(zhàn)攻略,根據(jù)Forefox瀏覽器和webkit內(nèi)核的瀏覽器兩種情況來分別講解,需要的朋友可以參考下2016-05-31
使用CSS3實(shí)現(xiàn)多列布局與多背景的技巧
這篇文章主要介紹了使用CSS3實(shí)現(xiàn)多列布局與多背景的技巧,包括多列欄目的高度平衡和多間隙等一些細(xì)節(jié)方面的調(diào)整方法講解,需要的朋友可以參考下2016-02-29- 這篇文章主要介紹了用CSS3實(shí)現(xiàn)背景漸變的方法,作者并沒有給出效果demo這個比較殘念...需要的朋友可以參考下2015-07-14
- background-size是css3提供的一個新特性，它可以讓你隨心所欲的控制背景圖片的大小。下面我們來一步步看看這個新特性都有什么值得我們驚艷的地方2014-09-02
使用CSS3的背景漸變Text Gradient 創(chuàng)建文字顏色漸變
使用CSS3 的背景漸變 -webkit-gradient ，用一個背景漸變的 DIV 代替圖片。下面是實(shí)現(xiàn)效果示例，相比以上方案優(yōu)點(diǎn)是不使用圖片，減小請求量和流量2014-08-19- CSS背景動畫很長時間以來都是一個熱門話題，很多時候都是因?yàn)樾Ч貏e絢麗，而且不需要額外的技術(shù)。最近有人問我是否可以給頁面上一個指定的元素安排多重背景動畫，答案是y2014-04-04
- CSS3之多背景background和CSS2的使用方法一樣，只不過圖片可以從1個圖片變成多個圖片了，其在CSS3的項目中運(yùn)用比較廣泛，大家有更好的案例要積極分享喲2013-10-18
css3背景_動力節(jié)點(diǎn)Java學(xué)院整理
這篇文章主要介紹了css3背景,CSS3規(guī)范中對背景這一部分，新加入了一些令人興奮的功能，如可以設(shè)置多個背景圖片、可以指定背景大小、設(shè)置背景漸變等功能。2017-07-11