CSS3雙重背景是CSS3中非常實用的一項功能,它能夠讓背景實現雙重效果,讓網頁看起來更為獨特,現在我們就來介紹一下如何使用CSS3雙重背景。
首先,我們需要用到的是CSS中的background屬性,只是這次會有兩個background屬性,一個是主背景,一個是次背景,而且次背景會在主背景的上面。
.dual-bg { background: url(main-bg.jpg) no-repeat center center fixed, url(sub-bg.jpg) no-repeat center center fixed; background-size: cover, cover; }
上面的代碼就是我們實現CSS3雙重背景的代碼,其中.dual-bg是我們定義的一個class,我們給它設置了兩個background:url(),分別指向主背景和次背景,no-repeat表示不重復,center center fixed表示居中并且不隨滾動條滾動。而最后一行background-size:cover;則是讓背景大小覆蓋整個網頁。
使用CSS3雙重背景可以讓我們制作更加美觀的網頁背景,如果你對它感興趣,現在就開始動手嘗試吧!
上一篇css p段落行間距
下一篇css3去掉滾動條