您好,登錄后才能下訂單哦!
這篇文章將為大家詳細講解有關HTML5圖片層疊怎么實現(xiàn),小編覺得挺實用的,因此分享給大家做個參考,希望大家閱讀完這篇文章后可以有所收獲。
需要那就做唄。其中有一個頁面布局如下所示,
紅色方框標注的部分是由三張圖片組合而成,各部分圖片如下:
要想實現(xiàn)上圖的圖片重疊,只需設置屬性元素的position和z-index屬性。
z-index:設置元素的堆疊順序。擁有更高堆疊順序的元素總是會處于堆疊順序較低的元素的前面。即z-index的值越大顯示越靠上。
position:有以下幾個值:static,relative,absolute,fixed。
Static:靜態(tài)定位。如果沒有設置position屬性,那么缺省就是static。top,left,bottom,right等屬性,在 static情況下是無效的,要使用這些屬性,必須把position設置為其他三個值之一。
Relative:相對定位。元素將按照靜態(tài)定位時的位置進行調(diào)整,在靜態(tài)定位中分配給元素的空間仍然會分配給它,它兩邊的元素不會向它靠近來填充那個空間,但它們也不會從元素的新位置被擠走。
Absolute:絕對定位。元素將按照包含它的元素的位置進行調(diào)整,比如它嵌套在另一個絕對定位的元素中,那么就相對于那個元素定位。
Fixed:固定定位。元素將被設置在瀏覽器上一個固定位置上,不會隨其他元素滾動。形象點說,上下拉動滾動條的時候,fixed的元素在屏幕上的位置不變。需要注意的是IE6并不支持此屬性。
具體實現(xiàn)如下,div布局
<div class="container3-1" style="float:left;"> <div> <img class="img1" style="position:absolute;z-index:1;float:left" src="img/4-1.png"> <img class="img2" style="position:absolute;z-index:2;float:left" src="img/4-2.png"> <img class="img3" style="position:absolute;z-index:3;float:left" src="img/4-3.png"> </div> <div class="container3-1-1" class="font24" style="text-align:center;color:#FFFFFF; background-color:#aaa050;">需保養(yǎng) </div> </div>
整合后的運行效果:
關于“HTML5圖片層疊怎么實現(xiàn)”這篇文章就分享到這里了,希望以上內(nèi)容可以對大家有一定的幫助,使各位可以學到更多知識,如果覺得文章不錯,請把它分享出去讓更多的人看到。
免責聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權內(nèi)容。