首页 > 代码库 > 通过使用html字体阴影效果解决hover图片时显示文字看不清的问题

通过使用html字体阴影效果解决hover图片时显示文字看不清的问题

2024-10-08 03:33:02   214人阅读

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图片时显示文字看不清的问题


联系
我们