本篇文章主要写html中img标签增强用户体验:
通过伪元素和content来实现
直接上代码:
css部分
img{
width: 800px;
height: 300px;
display: inline-block;
position: relative;
overflow: hidden;
}
img::after{
content: attr(alt);
position: absolute;
bottom: 0;
left: 0;
width: 100%;
text-align: center;
background-color: rgba(0,0,0,.5);
transition: all .5s;
transform: translateY(100%);
}
img:hover::after{
transform: translateY(0);
}
html部分 直接上img标签:
<img src="http://img57.ddimg.cn/146140003359366_y.jpg" alt="图片alt">
这样写的话,毫无疑问图片是正常显示的,但是当我们不设置src的值,也就是用户可能出现src属性加载失败下显示是这样子的:
我们给img设置上述css代码之后显示:
测试浏览器:Firefox,在用户加载图片失败后增强用户体验