html中img图片加载失败时的默认样式美化
图片加载失败的默认样式是很难看的。但是我们可以加上样式来处理。
比如：
<img class="avatar" alt="tonjay.com" src="//www.tonjay.com/favicon.ico"/>
解决方法就是：如果图片没有加载出来，我们可以给alt值增加样式
- 我们可以给伪元素添加背景图片。当然，图片正常加载时是不显示的。
- 也可以给伪元素输出图片alt文字信息
设置图片时代码：
.avatar{
position:relative;
width:100px;
height:130px;
}
/*只有image没有加载出来的时候 以下👎才有效果*/
.avatar:after{
position:absolute;
width:100px;
height:130px;
content:"";
display:block;
top:0;
left:0;
background:url('/img/default.png');
background-size:100%;}
设置alt文字信息时：
.avatar:after{
content: attr(alt);
/*可以自定义设置样式*/
}
相关内容
-
html如何用css美化表格
html用css美化表格的方法：首先创建一个HTML示例文件；然后在body中创建table表格；最后通过style标签给表格添加css样式即可。本文操作环境：Windows7...
-
文字居中的css代码是什么
文字居中的css代码是“text-align:center;”或“line-height:值;”。text-align属性规定元素文本的水平对齐方式，当值为center时，即可...
-
15 个优秀的响应式 Web 设计 HTML 和 CSS 框架
【推荐教程：CSS视频教程】响应式Web设计旨在为各种设备（从台式机显示器到手机）提供最佳的浏览体验。本文汇总了一些优秀的响应式Web设计HTML和CSS框架。这些框架都是开源...
-
如何使用css去掉a标签的下划线？（代码详解）
写html超链接的时候，超链接总是自带下划线，如果不需要下划线，我们需要将其去掉，下面我们就来说一下怎么去掉下划线。我们在使用超链接的时候，下划线总是伴随着出现，从视觉上来说有...
-
css如何去掉li前面的点
在css中，可以使用list-style属性来清除li前面的点，只需要给li标签设置“list-style:none”样式即可。list-style属性是用来控制li列表项目标...
-
css如何让高度自适应
css让高度自适应的方法：1、给html元素设置“height:100%;display:table;”样式，给body元素设置“display:table-cell;heig...
-
手把手教你使用img标签添加图片效果（知识）
之前的文章《如何使用HTML制作一个简单美观的导航栏（代码详解）》中，给大家介绍了怎样使用HTML制作导航栏的方法。下面本篇文章给大家带了解一下img标签怎么添加图片效果的方法...
-
手把手教你使用css给HTML字体添加边框效果（代码分享）
之前的文章《html网页中如何实现居中效果（代码分享）》中，给大家介绍了如何让网页整体居中。下面本篇文章给大家介绍怎样使用css给HTML元素字体添加边框效果，我们一起看看怎么...
-
手把手教你使用css给文字添加火焰效果（代码详解）
之前的文章《一招教你使用html给图片添加边框效果（代码详解）》中，给大家介绍了怎么使用html给图片添加边框效果。下面本篇文章给大家介绍怎么使用css给文字添加火焰效果，我们...
-
手把手教你怎么使用css3给文字添加动画效果（附代码）
之前的文章《手把手教你使用css给文字添加火焰效果（代码详解）》中，给大家介绍了怎么使用css给文字添加火焰效果。下面本篇文章给大家介绍怎么使用css3给文字添加动画效果，我们...
