1.前言

最近需要加入一個小功能，在鼠標越過圖片時，提示其大小和分辨率，而不想用增加屬性title來提醒，不夠好看。然而發(fā)現(xiàn)如果文字是一種顏色，然后總有概率碰到那張圖上浮一層的文字會看不到，所以加入文字字體陰影效果來解決此問題。

2.例子說明

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

???

加入字體陰影的效果

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

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;
第一個參數(shù)0px:代表陰影距離左5px顯示 第二個參數(shù)0px:代表陰影距離上5px顯示 第三個參數(shù)10px:代表陰影大小的范圍 第四個參數(shù)#000:代表圓陰影顏色 position:relative;bottom:33px
加入此屬性，文字的span標簽就可以讓其漂在圖片上面
$('.eachimg').hover(function() {var tip = "Image Size:"+$(this).find('img').attr('data-imgSize')+" Resolution:"+$(this).find('img').attr('data-imgResolution');$(this).find('#hoverTip').html(tip);$(this).find('#hoverTip').css("display","block");//$(this).find('#hoverTip').fadeIn();//$(this).find('#hoverTip').show(100);},function(){$(this).find('#hoverTip').css("display","none");//$(this).find('#hoverTip').fadeOut();//$(this).find('#hoverTip').hide(100);}); 說明一下，上面顯示隱藏，有三種方案，fadeIn和fadeOut 從底向上淡入淡出，show和hide是從左上角慢慢地淡入淡出，后兩種方案，目前這個代碼會出現(xiàn)一個問題，當你多次快速經(jīng)過某張圖片時，由于有延時性，所以淡入淡出會出現(xiàn)多次。 4.總結
這個小功能主要是用到了css相對位置和字體陰影的特性及jquery的hover的方法。

轉載于:https://www.cnblogs.com/fanbi/p/7044587.html

總結

以上是生活随笔為你收集整理的通过使用CSS字体阴影效果解决hover图片时显示文字看不清的问题的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內容還不錯，歡迎將生活随笔推薦給好友。