欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

CSS3之多背景background使用示例

  發(fā)布時(shí)間：2013-10-18 11:28:09   作者：佚名   我要評論
CSS3之多背景background和CSS2的使用方法一樣，只不過圖片可以從1個(gè)圖片變成多個(gè)圖片了，其在CSS3的項(xiàng)目中運(yùn)用比較廣泛，大家有更好的案例要積極分享喲

CSS3中新加了多背景這個(gè)屬性，和CSS2的使用方法一樣，只不過圖片可以從1個(gè)圖片變成多個(gè)圖片了。在CSS3中多背景的使用是非常常見的，所以，這個(gè)多背景的屬性應(yīng)用很普遍的，所以掌握CSS3之多背景background是當(dāng)務(wù)之急呀。

一、background的語法

1、background的分寫

復(fù)制代碼
代碼如下:

background-image: [background-image], [background-image], [background-image];
background-position: [background-position], [background-position], [background-position];
background-repeat: [background-repeat], [background-repeat], [background-repeat];

2、background的簡寫

復(fù)制代碼
代碼如下:

background: [background-image] [background-position] [background-repeat],
[background-image] [background-position] [background-repeat],
[background-image] [background-position] [background-repeat];

二、background的兼容情況
 
三、background的實(shí)例

1、圓角效果

CSS代碼：

復(fù)制代碼
代碼如下:

.a {width:300px;}
.b {background:url("http://www.leemagnum.com/img/left.jpg") no-repeat left top,
url("http://www.leemagnum.com/img/right.jpg") no-repeat right top;padding:0 10px;}
.b div {background:url("http://www.leemagnum.com/img/mid.jpg") repeat-x left top;height:48px;}

HTML代碼：

復(fù)制代碼
代碼如下:

<div class="a">
<div class="b">
<div>夢龍小站</div>
</div>
</div>

預(yù)覽效果：
 
2、多背景圖片

CSS代碼：

復(fù)制代碼
代碼如下:

div {width:300px;height:80px;border:1px solid #000;
background:url("http://www.leemagnum.com/img/logo.jpg") no-repeat,
url("http://www.leemagnum.com/img/a.jpg") no-repeat right -300px;
-webkit-transition:0.5s background-position ease;
}
div:hover {background-position:0 0,right 0;}

HTML代碼：

復(fù)制代碼
代碼如下:

<div></div>

預(yù)覽效果：

(1)默認(rèn)狀態(tài)
 
(2)hover狀態(tài)
 
CSS3之多背景background就為大家介紹完了，希望能對大家有所幫助。CSS3之多背景background在CSS3的項(xiàng)目中運(yùn)用比較廣泛，大家有更好的案例要積極分享喲。

相關(guān)文章

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

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

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

    這篇文章給大家介紹的是，利用CSS3實(shí)現(xiàn)當(dāng)點(diǎn)擊按鈕的時(shí)候，按鈕的背景是漸變動畫的效果，實(shí)現(xiàn)后的效果非常好，開發(fā)的時(shí)候利用這種效果的按鈕會給用戶一種非常酷炫的感受，感
    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)是不使用圖片，減小請求量和流量
    2014-08-19

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

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

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

    CSS3背景尺寸Background-size，這個(gè)屬性是改變背景尺寸的通過各種不同是屬性值改變背景尺寸呈現(xiàn)的大小，下面為大家詳細(xì)介紹下其語法、瀏覽器兼容及使用示例，感興趣的朋友
    2013-10-14

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

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

最新評論