CSS3網頁製作技巧:css3多重背景

來源:互聯網
上載者:User

文章簡介:css3以下版本的background只能單獨對一張圖片進行背景設定、平鋪方式、背景位置。而在css3賦予了它更大的權利,可以設定更多背景圖片,這就是今天要說的css3多重背景。

對於background不必多做解釋了,如果不瞭解的可以單獨論壇發帖。

css3以下版本的background只能單獨對一張圖片進行背景設定、平鋪方式、背景位置。而在css3賦予了它更大的權利,可以設定更多背景圖片,這就是今天要說的css3多重背景。

多重背景文法:background:背景,背景,背景;


1.background: url(images/weather-cloud.png) center center no-repeat, url(images/weather-clouds.png) top left no-repeat, url(images/weather-cloudy.png) top right no-repeat, url(images/weather-rain.png) bottom left no-repeat,url(images/weather-snow.png) bottom right no-repeat;

這種也是由css2中的background升級過來,只不過支援了多重背景。同樣它也分開來寫:


1.background-image:url(images/weather-cloud.png),url(images/weather-clouds.png),url(images/weather-cloudy.png),url(images/weather-rain.png),url(images/weather-snow.png);  2.background-repeat: no-repeat;  3.background-position:center center,top left,top right,bottom left,bottom right;
切記:image調用幾個,如果不共用其他屬性,必須分別寫出屬性。



聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.