亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

CSS3之背景尺寸Background-size使用介紹

  發(fā)布時(shí)間：2013-10-14 15:37:28   作者：佚名   我要評(píng)論
CSS3背景尺寸Background-size，這個(gè)屬性是改變背景尺寸的通過各種不同是屬性值改變背景尺寸呈現(xiàn)的大小，下面為大家詳細(xì)介紹下其語法、瀏覽器兼容及使用示例，感興趣的朋友不要錯(cuò)過

CSS3之背景尺寸Background-size是CSS3中新加的一個(gè)有關(guān)背景的屬性，這個(gè)屬性是改變背景尺寸的通過各種不同是屬性值改變背景尺寸呈現(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ù)所在元素的寬度的百分比來計(jì)算。
4、cover：此值是將圖片放大，以適合鋪滿整個(gè)容器，這個(gè)主要運(yùn)用在，當(dāng)圖片小于容器時(shí)，又無法使用background-repeat來實(shí)現(xiàn)時(shí)，我們就可以采用cover;將背景圖片放大到適合容器的大小，但這種方法會(huì)使用背景圖片失真;
5、contain：此值剛好與cover相反，其主要是將背景圖片縮小，以適合鋪滿整個(gè)容器，這個(gè)主要運(yùn)用在，當(dāng)背景圖片大于元素容器時(shí)，而又需要將背景圖片全部顯示出來，此時(shí)我們就可以使用contain將圖片縮小到適合容器大小為止，這種方法同樣會(huì)使用圖片失真。
當(dāng)background-size取值為number和percentage時(shí)可以設(shè)置兩個(gè)值，也可以設(shè)置一個(gè)值，當(dāng)只取一個(gè)值時(shí)，第二個(gè)值相當(dāng)于auto，但這里的auto并不會(huì)使背景圖片的高度保持自己原始高度，而會(huì)與第一個(gè)值相同。

二、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就為大家介紹到這里了，很簡(jiǎn)單的小屬性，這只是CSS3新加的背景屬性之一，更多有關(guān)CSS3的小屬性盡在夢(mèng)龍小站，跟多有關(guān)CSS3的其他內(nèi)容歡迎大家關(guān)注夢(mèng)龍小站有關(guān)CSS3的更新。

相關(guān)文章

  • CSS3實(shí)現(xiàn)多背景模擬動(dòng)態(tài)邊框的效果

    前幾天在工作的時(shí)候遇到一個(gè)問題，項(xiàng)目需要實(shí)現(xiàn)一個(gè)效果，當(dāng)鼠標(biāo)移入一個(gè)元素的時(shí)候，元素出現(xiàn)一個(gè)動(dòng)態(tài)的邊框，通過網(wǎng)上查找資料看到有人推薦可以使用Css3來實(shí)現(xiàn)，后來試了
    2016-11-08

  • CSS3點(diǎn)擊按鈕實(shí)現(xiàn)背景漸變動(dòng)畫效果

    這篇文章給大家介紹的是，利用CSS3實(shí)現(xiàn)當(dāng)點(diǎn)擊按鈕的時(shí)候，按鈕的背景是漸變動(dòng)畫的效果，實(shí)現(xiàn)后的效果非常好，開發(fā)的時(shí)候利用這種效果的按鈕會(huì)給用戶一種非常酷炫的感受，感
    2016-10-19

  • CSS3條紋背景制作的實(shí)戰(zhàn)攻略

    這篇文章主要介紹了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)背景漸變的方法

    這篇文章主要介紹了用CSS3實(shí)現(xiàn)背景漸變的方法,作者并沒有給出效果demo這個(gè)比較殘念...需要的朋友可以參考下
    2015-07-14

  • css3中背景尺寸background-size詳解

    background-size是css3提供的一個(gè)新特性，它可以讓你隨心所欲的控制背景圖片的大小。下面我們來一步步看看這個(gè)新特性都有什么值得我們驚艷的地方
    2014-09-02

  • 使用CSS3的背景漸變Text Gradient 創(chuàng)建文字顏色漸變

    使用CSS3 的背景漸變 -webkit-gradient ，用一個(gè)背景漸變的 DIV 代替圖片。下面是實(shí)現(xiàn)效果示例，相比以上方案優(yōu)點(diǎn)是不使用圖片，減小請(qǐng)求量和流量
    2014-08-19

  • 多重CSS背景動(dòng)畫實(shí)現(xiàn)方法示例

    CSS背景動(dòng)畫很長(zhǎng)時(shí)間以來都是一個(gè)熱門話題，很多時(shí)候都是因?yàn)樾Ч貏e絢麗，而且不需要額外的技術(shù)。最近有人問我是否可以給頁(yè)面上一個(gè)指定的元素安排多重背景動(dòng)畫，答案是y
    2014-04-04

  • CSS3之多背景background使用示例

    CSS3之多背景background和CSS2的使用方法一樣，只不過圖片可以從1個(gè)圖片變成多個(gè)圖片了，其在CSS3的項(xiàng)目中運(yùn)用比較廣泛，大家有更好的案例要積極分享喲
    2013-10-18

  • css3背景_動(dòng)力節(jié)點(diǎn)Java學(xué)院整理

    這篇文章主要介紹了css3背景,CSS3規(guī)范中對(duì)背景這一部分，新加入了一些令人興奮的功能，如可以設(shè)置多個(gè)背景圖片、可以指定背景大小、設(shè)置背景漸變等功能。
    2017-07-11

最新評(píng)論