CSS圖片怎么設(shè)置超鏈接呢?其實很簡單,在HTML中我們可以通過<a>標(biāo)簽來設(shè)置超鏈接,而在CSS中則需要利用background屬性來設(shè)置。具體步驟如下:
<style> .link { display: block; background: url("圖片地址") no-repeat; width: 100px; height: 100px; text-indent: -9999px; } .link:hover { background-position: 0 -100px; } </style> <a href="超鏈接地址" class="link">超鏈接內(nèi)容</a>
首先我們需要設(shè)置一個display為block的元素,在此基礎(chǔ)上利用background屬性來設(shè)置圖片,同時通過width和height來設(shè)置圖片的尺寸。為了避免圖片alt屬性出現(xiàn)的文字影響美觀,我們使用text-indent將其移出可見范圍。
當(dāng)鼠標(biāo)經(jīng)過這個元素時,我們需要通過:hover來設(shè)置背景圖片的位置,從而實現(xiàn)圖片的滑動效果。
最后在<a>標(biāo)簽中添加class屬性,并將其設(shè)為我們剛剛設(shè)置的類名,再設(shè)置href屬性為超鏈接地址,內(nèi)容則為需要添加超鏈接的文字內(nèi)容。
通過以上步驟,我們即可使用CSS完成圖片的超鏈接設(shè)置。希望對大家有所啟發(fā)。