CSS實現(xiàn)鼠標(biāo)拖拽圖片的方法如下:
/* HTML */ <div class="container"> <img src="example.jpg" class="draggable"> </div> /* CSS */ .container { width: 500px; height: 500px; border: 1px solid black; position: relative; } .draggable { position: absolute; top: 0; left: 0; z-index: 99; } .draggable:active { cursor: move; }
首先,在HTML中,我們需要一個裝載圖片的容器,這里我們使用div元素,并在其中插入一張圖片。我們需要為圖片添加一個類名,以便在CSS中選擇它。
接下來,在CSS中,我們需要給容器設(shè)置一個position:relative屬性,這樣所有在這個容器內(nèi)部的元素,它們的position屬性都將相對于這個容器。我們將圖片的position屬性設(shè)置為absolute,這樣它可以在容器內(nèi)部任意移動。我們將圖片的z-index屬性設(shè)置為99,確保它始終位于其他元素的上方。
最后,我們需要給圖片添加一個:active偽類,當(dāng)鼠標(biāo)按下時觸發(fā)。我們將鼠標(biāo)樣式設(shè)置為"move",表示可以拖拽移動這個元素。
實現(xiàn)以上樣式后,我們就可以使用鼠標(biāo)拖拽這張圖片了。