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中文网 ！！
智能推荐
开源项目，毕业设计_本科毕业设计拿别人的开源代码修改-程序员宅基地
文章浏览阅读1.5w次，点赞35次，收藏385次。自己在网上找的开源项目，比较好分享给大家热门开源项目（包含小四轴、智能手环、光立方、智能车、防丢器等项目）号外！号外！（搞四轴，有这套就足够了！)科研级别的小四轴STM32F4芯片支持WIFI且android手机控制自适应控制就是牛掰！该飞机面向有科研和强烈学习意向的小伙伴们使用，如果只是想玩的话你肯定不会喜欢这套四轴的，主要设计思想是提供一个高性能的控制和姿态算法验证平台，因此..._本科毕业设计拿别人的开源代码修改
Java快速开发框架_若依——Ruoyi添加自己的业务模块_ruoyi java17-程序员宅基地
文章浏览阅读1w次，点赞2次，收藏26次。QQ 1274510382Wechat JNZ_aming商业联盟 QQ群538250800技术搞事 QQ群599020441解决方案 QQ群152889761加入我们 QQ群649347320共享学习 QQ群674240731纪年科技aming网络安全 ,深度学习,嵌入式,机器强化,生物智能,生命科学。叮叮叮：产品已上线 —>关注 官方-微信公众号——济南纪年信息科技有限公司民生项目：商城加盟/娱乐交友/创业商圈/外包兼职开发-项目发布/安全项目：态势感.._ruoyi java17
CISCO 交换机配置 Web浏览器的方式-程序员宅基地
文章浏览阅读9k次，点赞2次，收藏3次。 当利用Console口为交换机设置好IP地址信息并启用HTTP服务后，即可通过支持JAVA的Web浏览器访问交换机，并可通过Web通过浏览器修 改交换机的各种参数并对交换机进行管理。事实上，通过Web界面，可以对交换机的许多重要参数进行修改和设置，并可实时查看交换机的运行状态。不过在利用 Web浏览器访问交换机之前，应当确认已经做好以下准备工作：·在用于管理的计算机中安装T..._思科交换机2960s有web配置吗
ERROR - file: tracker_proto.c, line: 48, server: 127.0.0.1:22122, response status 2 != 0-程序员宅基地
文章浏览阅读2.5w次，点赞2次，收藏6次。报错信息： [2018-09-09 20:33:12] ERROR - file: tracker_proto.c, line: 48, server: 127.0.0.1:22122, response status 2 != 0 [2018-09-09 20:33:12] ERROR - file: tracker_proto.c, line: 48, server: 127.0.0.1:..._error - file: tracker_proto.c, line: 48, server: 172.17.0.1:22122, response
使用matplotlib显示图片（《深度学习入门：基于Python的理论与实现》实践笔记）_matplotlib展示图片-程序员宅基地
文章浏览阅读3.9k次。使用matplotlib显示图片（《深度学习入门：基于Python的理论与实现》实践笔记）一、安装matplotlib库二、导入matplotlib.pyplot库和matplotlib.image库里的imread函数三、实例：显示图片一、安装matplotlib库在命令行使用下面的命令即可：pip install matplotlib二、导入matplotlib.pyplot库和matplotlib.image库里的imread函数在程序开头使用：import matplotlib.pyp_matplotlib展示图片
Subversion实践案例——客户现场模式的分布式开发_开发去客户现场的案例-程序员宅基地
文章浏览阅读1.2k次。基本信息 用户单位：某应用软件研发企业 用户规模：100人以上 组织过程水平：中等 CMMI评审等级：无 Subversion使用时间：1年 客户需求 由于公司每次向新客户提交软件的时候都需要派出一个小规模的团队到客户现场进行一段时间的软件定制和维护。此外，老客户系统的重大升级和功能扩展也需要一个小团队在客户现场进行一段时间的开发。因此，异地开发的配置管理就是一_开发去客户现场的案例
随便推点
（基于matlab自写代码）语音信号的短时分析，计算平均能量，短时过零数_matlab求语音信号短时过零率的函数-程序员宅基地
文章浏览阅读3.2k次。一定时宽的语音信号，其能量的大小随时间有明显的变化。清音段能量比浊音段小得多。短时过零数也可用于语音信号分析中，发浊音时，其语音能量约集中于3kHz以下，而发清音时，多数能量出现在较高频率上。可认为浊音时具有较低的平均过零数，而清音时具有较高的平均过零数，故对一短时语音段计算其短时平均能量及短时平均过零数，就可以区分其中的清音段和浊音段，从而可判别句中清、浊音转变时刻，声母韵母的分界以及无声与有声的分界。这在语音识别中有重要意义。自己编写的matlab代码，对一段语音，取帧长为240个点，计算其平均能_matlab求语音信号短时过零率的函数
Ubuntu服务器创建新用户及解决新用户登录Access denied问题
默认情况下，在Ubuntu上，sudo组的成员被授予sudo访问权限。如果您希望新创建的用户具有管理权限，需要将将用户添加到sudo组。命令将向你询问一系列的问题。密码是必需的，其他字段都是可选的。最后，输入Y确认信息是否正确。执行完上述步骤后需要重启ssh服务，否则新创建的用户连接服务器时会出现。
项目组织战略管理及组织结构_项目组织的具体形态的是战略管理层-程序员宅基地
文章浏览阅读1.7k次。组织战略是组织实施各级项目管理，包括项目组合管理、项目集管理和项目管理的基础。只有从组织战略的高度来思考，思考各个层次项目管理在组织中的位置，才能够理解各级项目管理在组织战略实施中的作用。同时战略管理也为项目管理提供了具体的目标和依据，各级项目管理都需要与组织的战略保持一致。..._项目组织的具体形态的是战略管理层
图像质量评价及色彩处理_图像颜色质量评价-程序员宅基地
文章浏览阅读1k次。目录基本统计量色彩空间变换亮度变换函数白平衡图像过曝的评价指标多视影像因曝光条件不一而导致色彩差异，人眼可以快速区分影像质量，如何利用图像信息辅助算法判断影像优劣。基本统计量灰度均值方差梯度均值方差梯度幅值直方图图像熵p·log(p)色彩空间变换RGB转单通道灰度图像 mean = 225.7 stddev = 47.5mean = 158.5 stddev = 33.2转灰度梯度域gradMean = -0.0008297 / -0.000157461gr_图像颜色质量评价
MATLAB运用规则,利用辛普森规则进行数值积分-程序员宅基地
文章浏览阅读1.4k次。Simpson's rule for numerical integrationZ = SIMPS(Y) computes an approximation of the integral of Y via the Simpson's method (with unit spacing). To compute the integral for spacing different from one..._matlab利用幸普生计算积分
【AI之路】使用huggingface_hub优雅解决huggingface大模型下载问题-程序员宅基地
文章浏览阅读1.2w次，点赞28次，收藏61次。Hugging face 资源很不错，可是国内下载速度很慢，动则GB的大模型，下载很容易超时，经常下载不成功。很是影响玩AI的信心。经过多次测试，终于搞定了下载，即使超时也可以继续下载。真正实现下载无忧！究竟如何实现？且看本文分解。_huggingface_hub