CSS3可以很方便地實(shí)現(xiàn)全背景輪播,下面是一份示例代碼:
html,body{ height: 100%; margin: 0; } .container{ position: relative; height: 100%; overflow: hidden; } .container img{ position: absolute; top: 0; left: 0; margin: auto; min-width: 100%; min-height: 100%; } .container .caption{ position: absolute; bottom: 0; width: 100%; text-align: center; color: #fff; font-size: 2em; font-weight: bold; text-shadow: 1px 1px 5px rgba(0,0,0,0.5); padding: 10px; box-sizing: border-box; background-color: rgba(0,0,0,0.3); } @keyframes slide { 0% { opacity: 0; } 5% { opacity: 1; } 25% { opacity: 1; } 30% { opacity: 0; } 100% { opacity: 0; } } .container img:nth-child(1) { animation: slide 10s infinite; } .container img:nth-child(2) { animation: slide 10s infinite; animation-delay: 3s; } .container img:nth-child(3) { animation: slide 10s infinite; animation-delay: 6s; }
首先,我們需要給html和body元素設(shè)置高度為100%和margin為0,這是為了讓輪播占滿整個(gè)窗口。
然后我們創(chuàng)建一個(gè)名為.container的容器,用來包裹輪播的圖片和文字。這里需要注意的是要給容器設(shè)置position為relative,這樣我們的圖片和文字元素才能通過absolute屬性相對(duì)于容器定位。
接下來,在.container中,我們創(chuàng)建一個(gè)img元素用來顯示輪播的圖片,使用absolute定位,并設(shè)置top、left和margin為auto來實(shí)現(xiàn)居中,同時(shí)也設(shè)置min-width和min-height為100%來讓圖片自適應(yīng)容器的大小。
下一步,我們創(chuàng)建一個(gè).caption元素用來顯示輪播的標(biāo)題文字,同樣使用absolute定位,設(shè)置bottom和width為100%,同時(shí)也給元素設(shè)置padding、text-align和background-color等屬性來讓文字更加清晰可讀。
最后,我們使用CSS3的@keyframes屬性創(chuàng)建名為slide的動(dòng)畫,在.container img元素中分別應(yīng)用,使用animation-delay屬性來實(shí)現(xiàn)不同圖片的切換時(shí)間間隔。這樣我們就成功地實(shí)現(xiàn)了全背景輪播效果。