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

CSS3之多背景background使用示例

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

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

一、background的語法

1、background的分寫

復制代碼
代碼如下:

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的簡寫

復制代碼
代碼如下:

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

二、background的兼容情況
 
三、background的實例

1、圓角效果

CSS代碼：

復制代碼
代碼如下:

.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代碼：

復制代碼
代碼如下:

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

預覽效果：
 
2、多背景圖片

CSS代碼：

復制代碼
代碼如下:

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代碼：

復制代碼
代碼如下:

<div></div>

預覽效果：

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

相關文章

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

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

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

    這篇文章給大家介紹的是，利用CSS3實現(xiàn)當點擊按鈕的時候，按鈕的背景是漸變動畫的效果，實現(xiàn)后的效果非常好，開發(fā)的時候利用這種效果的按鈕會給用戶一種非?？犰诺母惺埽?/div> 2016-10-19

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

    這篇文章主要介紹了CSS3條紋背景制作的實戰(zhàn)攻略,根據(jù)Forefox瀏覽器和webkit內核的瀏覽器兩種情況來分別講解,需要的朋友可以參考下
    2016-05-31

  • 使用CSS3實現(xiàn)多列布局與多背景的技巧

    這篇文章主要介紹了使用CSS3實現(xiàn)多列布局與多背景的技巧,包括多列欄目的高度平衡和多間隙等一些細節(jié)方面的調整方法講解,需要的朋友可以參考下
    2016-02-29

  • 用CSS3實現(xiàn)背景漸變的方法

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

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

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

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

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

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

    CSS背景動畫很長時間以來都是一個熱門話題，很多時候都是因為效果特別絢麗，而且不需要額外的技術。最近有人問我是否可以給頁面上一個指定的元素安排多重背景動畫，答案是y
    2014-04-04

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

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

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

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

最新評論