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,在用户加载图片失败后增强用户体验

发布了30 篇原创文章 · 获赞 19 · 访问量 5万+
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 技术工厂 设计师: CSDN官方博客

分享到微信朋友圈

×

扫一扫,手机浏览