img图片增加用户体验

本篇文章主要写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，在用户加载图片失败后增强用户体验

转载于:https://www.cnblogs.com/zj1024/p/8831151.html