通過使用html字型陰影製作效果解決hover圖片時顯示文字看不清的問題

標籤：blog   pre   代碼   host   範圍   區別   字型   relative   顯示   

1.前言

最近需要加入一個小功能，在滑鼠越過圖片時，提示其大小和解析度，而不想用增加屬性title來提醒，不夠好看。然而發現如果文字是一種顏色，然後總有機率碰到那張圖上浮一層的文字會看不到，所以加入文字字型陰影製作效果來解決此問題。

2.例子說明

未加入字型陰影之前的效果

 

加入字型陰影的效果

 

如果沒加入字型陰影的效果，左圖會看不清哪些文字的，而右圖沒有多大區別。

3.相關代碼

<div> <img alt="imageSample" style="width:160px;height:90px" data-imgSize="<%=size%>" data-imgResolution="<%=resolution%>" src="http://localhost:8080/xxx/static/images/list/<%=fileName%>">　　<span id="hoverTip" style="font-size:12px;text-shadow:0px 0px 10px #000;color:#ffffff;width:160px;height:20px;position:relative;bottom:33px"></span></div>

text-shadow:0px 0px 10px #000;
第一個參數0px:代表陰影距離左5px顯示

第二個參數0px:代表陰影距離上5px顯示

第三個參數10px:代表陰影大小的範圍

第四個參數#000:代表圓陰影顏色

4.總結

通過使用html字型陰影製作效果解決hover圖片時顯示文字看不清的問題