CSS-圖像映射_html/css

來源：懂視網(wǎng) 責編：小采時間：2020-11-27 16:15:43

CSS-圖像映射_html/css

CSS-圖像映射_html/css_WEB-ITnose:圖像映射是將一些區(qū)域變成熱點，我們在網(wǎng)上獲取搜索圖片，圖片上會有關(guān)于任務的簡短信息介紹，還有一個接觸更多的就是QQ空間的相冊，瀏覽QQ空間照片鼠標滑動到人物頭像的時候讓你選擇標記人物，都是將圖片和內(nèi)容混合在一起進行表現(xiàn)。用戶在看圖片的時候不在是

推薦度：

點擊下載本文 文檔為doc格式

導讀CSS-圖像映射_html/css_WEB-ITnose:圖像映射是將一些區(qū)域變成熱點，我們在網(wǎng)上獲取搜索圖片，圖片上會有關(guān)于任務的簡短信息介紹，還有一個接觸更多的就是QQ空間的相冊，瀏覽QQ空間照片鼠標滑動到人物頭像的時候讓你選擇標記人物，都是將圖片和內(nèi)容混合在一起進行表現(xiàn)。用戶在看圖片的時候不在是

圖像映射是將一些區(qū)域變成熱點，我們在網(wǎng)上獲取搜索圖片，圖片上會有關(guān)于任務的簡短信息介紹，還有一個接觸更多的就是QQ空間的相冊，瀏覽QQ空間照片鼠標滑動到人物頭像的時候讓你選擇標記人物，都是將圖片和內(nèi)容混合在一起進行表現(xiàn)。用戶在看圖片的時候不在是冰冷冷的圖片，其實就是實現(xiàn)起來這種內(nèi)容和圖片的映射很簡單，簡單的看下效果:

Html代碼:

   	 	李連杰 
  	 	姚明

　CSS代碼：

 .group-img { width: 423px; height: 480px; position: relative; } .group-img a { position: absolute; display: block; text-decoration: none; color: #000; border: 1px solid transparent; } .group-img a .outer { display: block; border: 1px solid transparent; } .group-img a .inner { display: block; width: 100px; height: 80px; border: 1px solid transparent; margin: 3px; } .group-img a .note { position: absolute; top: 100px; left: -9999px; background: #BDBDBD; width: 106px; padding: 5px; text-align: center; color: #fff; } .group-img .li a { top: 100px; left: 120px; } .group-img .yao a { top: 8px; left: 260px; } .group-img a:hover, .group-img a:focus { border: 1px solid #d4d82d; } .group-img a:hover .outer, .group-img a:focus .outer { border: 1px solid #00FF7F; } .group-img a:hover .inner, .group-img a:focus .inner { border: 1px solid #00CED1; } .group-img a:hover .note, .group-img a:focus .note { left: 0px; }

CSS布局需要注意兩點將容器的大小和圖片的大小保持一致，不顯示的文字通過left隱藏文字，鼠標滑動的時候回歸正常~

聲明：本網(wǎng)頁內(nèi)容旨在傳播知識，若有侵權(quán)等問題請及時與本網(wǎng)聯(lián)系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

CSS-圖像映射_html/css

推薦度：

點擊下載本文 文檔為doc格式

標簽：映射圖像 html

熱門焦點

CSS-圖像映射_html/css

CSS-圖像映射_html/css

CSS-圖像映射_html/css

最新推薦

猜你喜歡

熱門推薦