html怎么设置默认状态,网页中如何设置默认图片？方式介绍-程序员宅基地
技术标签： html怎么设置默认状态
网页中如何设置默认图片？下面本篇文章就来给大家介绍一下在网页中设置默认图片，防止当图片资源失败时出现的问题。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。
现在网页中图片随处可见，但避免不了有时会出现图片资源失败的情况，在谷歌浏览器中就会显示这样
这里的alt属性是为了当图片加载失败时告诉用户图片信息的
能不能美化一下呢？
下面给出几种方式
js 方式
相信大家碰到这种问题是，搜索的结果一般都是用图片的onerror方法onerror 事件会在文档或图像加载过程中发生错误时被触发。
在装载文档或图像的过程中如果发生了错误，就会调用该事件句柄。
使用方式也很简单
但是，这个方法一定要注意，保证onerror里面赋值的图片地址一定不能出错，否则，就会无限调用onerror...
页面直接崩掉..
有人说，我可以保证呀。那么，既然能保证，为什么还会有前面图片加载失败，而启用备用图片的情况发生呢？
当然，你可以采用base64的方式，缺点就是太长..类似下面这种
兼容性还是可以的，基本满足日常开发。
那么有没有css解决方式呢？
当然有，如果只用兼容主流浏览器的话
css 方式
这里提供两种方式
1、伪元素
虽然img是单标签，里面不能包裹其他元素，但是却可以包含伪元素
不过这里有个特征，只有当图片加载失败或者没有图片的时候，才会显示伪元素
既然如此，我们可以用伪元素来实现一个默认提示效果img{
display: inline-block;
position: relative;
width: 200px;
height: 200px;
background: #ccc;
vertical-align: top;
}
img:after{
content: '';
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: url('img/b.jpg') #ccc;
}
思路很简单，就是用伪元素覆盖在原图片上，而且图片加载失败也没什么问题，最多不显示，也可以以纯色背景作为默认占位图。
2、背景图片
还有一种方式，用到了css3中的多背景特性div{
background:url(a.jpg),
url(b.jpg),
url(logo.png);
}指定的时候，按浏览器中显示时图像叠放的顺序从上往下指定的，第一个图像文件是放在最上面的，最后指定的文件是放在最下面的。
这样我们也可以实现默认图片的显示.img{
width: 200px;
height: 200px;
background: url('a.png'),url('logo.png') #f1f1f1
}
不过这种方式本质上是多张图片重叠在一起，如果上一层加载失败，才会看得见底下的那一张，也就是说如果都加载成功，其实都是存在的。那么就要注意了，如果上层的图有透明部分，就有可能看得到底下的图，漏光了！
如上，两张图都加载成功了，由于上层有透明部分，所以看到了底图。所以在使用这种情况的时候，需要使用.jpg图片，避免走光
小节
以上介绍了三种设置默认图片的方式，
从兼容性方面来讲，js方法适应性最广，可以低版本兼容ie，其他两种就不行了，只需注意备用图片地址不要出错就可以了
个人比较建议第二种伪元素方式，纯css方式，html可以不做任何修改，适合对已有项目的体验升级，有了体验更好，没有也无伤大雅
第三种就可以当娱乐看看了，当做一种思维方式吧，毕竟没有任何语义化，给一个div，别人根本就不知道这是一张图片，对搜索引擎也不友好。
各位小伙伴还有什么更好的方式呢？ ^^
更多web前端开发知识，请查阅 HTML中文网 ！！
智能推荐
Box-cox变换_boxcox变换中计算λ的最大似然估计函数怎么算的-程序员宅基地
文章浏览阅读3.8k次，点赞2次，收藏5次。Box-Cox变换 Box和Cox于1964年提出了一种基于极大似然法的幂转换模型。Box-Cox幂分布族是一种十分有用的连续分布族。其转换模型为 y(λ)={yλ−1λ,λ≠0lny,λ=0(1)(1)y(λ)={yλ−1λ,λ≠0lny,λ=0y^{(\lambda)} = \begin {cases} \frac {y^\lambda-1} {\lambda},\lambda..._boxcox变换中计算λ的最大似然估计函数怎么算的
【新手】lunux中Makefile的作用&用法&工作原理_makefile &-程序员宅基地
文章浏览阅读213次。Makefile的作用与用法？对于多文件项目，当用gcc编译时，每次编译需要输入一连串的文件名称，所以操作起来比较麻烦。 比如有四个文件a.c b.c c.c d.c ，编译时gcc a.c b.c c.c d.c -o exe 如何创建makefile文件？&makefile中的内容是什么？此时如果我们用touch创建一个Makefile文件，并vim Mak..._makefile &
Android 闹钟_嵌入式linux实现闹钟-程序员宅基地
文章浏览阅读2.1k次。需求：新的平台要实现关机启动，所以要了解一下闹钟的机制１、AlarmManager 这个是闹钟的核心 里面有void set函数，void setInexactRepeating函数 通过这些函数来设置 源码链接：http://download.csdn.net/detail/weiqifa0/9173341设置闹钟的代码：package com.examp_嵌入式linux实现闹钟
Python使用Pandas导入数据库sql_pandas 导入数据库-程序员宅基地
文章浏览阅读1w次，点赞3次，收藏12次。Python使用Pandas导入数据库sql_pandas 导入数据库
Python项目迁移相关_failed to parse cpython sys.version: '3.6.3 (v3.6.-程序员宅基地
文章浏览阅读624次。网上其他人给出的答案如https://www.jianshu.com/p/7530c2401273需求：电脑A的项目迁移到电脑B步骤1：在电脑A项目的terminal中导出需要的包及版本，命令为pip freeze >requirements.txt，如图步骤2：电脑B中创建项目及虚拟环境，把requirements.txt文件复制到项目文件夹下，运行命令pip install -r requirements.txt，如图步骤3：把电脑A中的项目文件复制到电脑B的项目中。出现的问题_failed to parse cpython sys.version: '3.6.3 (v3.6.3:2c5fed8, oct 3 2017, 18:
卸载mysql服务器_彻底卸载MySQL服务-程序员宅基地
文章浏览阅读4.8k次，点赞5次，收藏7次。前言由于安装某个项目的执行文件，提示要卸载MySQL以便它自身MySQL安装，然后我禁用了MYSQL服务，再把这个文件夹删除后，发现还是提示请卸载MYSQL服务。--------------------------------------------------------------------禁用服务方式如下：或者 我的电脑右键->管理->服务，进入后手动禁用。----------..._mysql卸载服务
随便推点
glide 设置宽高_Android之ImageView加载图片保持宽高比-程序员宅基地
文章浏览阅读2.2k次。1、前言有时候，我们在应用中加载图片时并不知道图片确切的宽高数值，但是需要保持宽高比，比如我就遇到这样的设计：图片的宽度填满屏幕，宽高比例为16:9，高度根据这个比例自适应。这样加载出来的图片就形同一张卡片。由于不同手机的屏幕宽度不一样，所以图片宽高无法提前在布局中确定，但好在我们还是可以在代码中动态实现的，现在我们就来看看吧。2、UI布局为了便于比较，我在布局中放置了两个ImageView，它们..._glide 保持比例
c 语言 uint8 转char,关于c ++：将uint8_t *更改为char *？-程序员宅基地
文章浏览阅读8.2k次。我有一个请求char*的API，这是我的API函数：CANMessage(unsigned _id, const char* _data, char _len = 8)此处提供更多信息：https://os.mbed.com/docs/mbed-os/v5.11/mbed-os-api-doxy/classmbed_1_1_c_a_n_message.html我想从另一个函数中调用此函数，但是我..._uint8_t转char
python毕业论文项目-基于Python的旅游管理系统微信小程序设计与实现毕业论文+项目源码及数据库...-程序员宅基地
文章浏览阅读1.6k次。ABSTRACTThis system takes WeChat small program as the platform, designs and realizes the system combining tourism and commercialization.This system adopts the network design mode of C/S, which can pro..._论文数据挖掘的python小程序
cce是什么意思_CCE 是什么-程序员宅基地
文章浏览阅读2.9k次。电影工艺编码器(CCE)是由可见光开发的视频编码产品系列，编码器是专为后期制作工作转换成各种视频格式，如MPEG-2或H.265发行的DVD或蓝光。它们还允许对单个场景的灯光和效果进行调整。编码器对Windows和Linux都可用。电影工艺编码器(CCE)是由可见光开发的视频编码产品系列。这些编码器是专为后期制作工作转换成各种视频格式，如 MPEG-2 或 H.265 发行的 DVD 或蓝光。它们..._gfx的cce是什么意思
Spring Security 之密码存储_spring后端如何存账号密码?-程序员宅基地
文章浏览阅读943次，点赞19次，收藏14次。Spring Security的接口用于执行密码的单向转换，以便可以安全的存储密码。通常用于在认证时将用户提供的密码与存储的密码的比较。_spring后端如何存账号密码?
JavaScript 中 for in 和for of的区别_js forin和forof区别-程序员宅基地
文章浏览阅读3.9k次，点赞4次，收藏17次。重点内容for in 取 key； for of 取 valuefor of 只能用于数组遍历，for in还可以用于对象属性的遍历eg，1. 遍历数组：let array = [1,2,3,'lynn','Lanny']console.log('for of: ')for (let value of array){ console.log(value);}c..._js forin和forof区别