前言
大家可能都知道img标签是怎样设置默认图片的,但是你知道background-img是如何设置默认图片的嘛?
html中如何设置默认图片?
JS监听
这里是应使用了img标签的onerror事件,当加载失败就使用默认图片地址。但是这里可能出现假如默认图片地址也加载不出来,或者者失败,在IE内核的浏览器下就会反复加载,出现死循环,最后造成堆栈溢出错误。因而, 需要使用下面两种方法处理:更改 onerror 代码为其它解决方式或者者确保 onerror 中的默认图片足够小,并且存在。
控制 onerror 事件只触发一次,需要添加这句话:this.οnerrοr=null。
html中如何设置默认图片?
background-img
background是可以设置多个背景图片的,最前面的优先级越高,所以假如javan1.jpg没有就好显示第二个javan2.jpg,假如还没有就好显示第三个javan3.jpg。
第一种:background: url("javan1.jpg") 0 0 no-repeat,
url("javan2.jpg") 200px 0 no-repeat,
url("javan3.jpg") 400px 201px no-repeat;
第二种:background-image: url("javan1.jpg"), url("javan2.jpg"), url("javan3.jpg");
background-repeat: no-repeat, no-repeat, no-repeat;
background-position: 0 0, 200px 0, 400px 201px;
需要注意的是:IE8及更早浏览器不支持CSS3 background-image,即不支持多背景和用渐变作为背景图像。
拓展-CSS渐变background-image: linear-gradient( [ | ,]? [, ]+ );
上面这种CSS语法我们经常见到,可能有人看不懂具体的意思,其实上面的些符号含义与正则表达式有很多一致之处:[] 在正则中表示一个字符类,这里,你可以了解为一个小单元。
| 表示候选。也就是“或者者”的意思,要么前面的,要么就后面的。
? 为量词,表示0个或者1个,言外之意就是,你可以不指定方向,直接渐变色走起。
+ 也是量词,表示1个或者者更多个。因而,终止颜色是不可缺少的。例如:linear-gradient(red)是酱油命,白板。
<> 中的是关键字,主要是让开发人员知道这里应该放些什么内容。水平渐变{
background-image: linear-gradient(left, red 100px, yellow 200px);
}
CSS水平渐变左上角渐变{
background-image:linear-gradient(left top, red 100px, yellow 200px);
}
CSS左上角渐变
声明
喜欢小编的点击关注,理解更多资源!