详解img[src=""] img无路径情况下，灰色边框去除解决方法

1.Js解决办法

 <html>

     <head>

         <meta charset="UTF-8">

         <title></title>

     </head>

     <body>

     <img src="error.jpg" onerror="whenError(this)">

     </body>

     <script>

     function whenError(a){

         a.onerror=null;

         a.src='path_default.jpg';

         console.log('图片出错的时候调用默认的图片');

     }

     </script>

 </html>

2.绝对定位聚焦解决方案

 <!DOCTYPE html>

 <html>

     <head>

         <meta charset="UTF-8">

         <title>absolute聚焦解决方案</title>

     </head>

     <body>

         <p class="container-img">

             <img class="common-icon login-icon" src="" width="38" height="38">

         </p>

     </body>

     <style type="text/css">

         .container-img {

             position: relative;

             display: inline-block;

             width: 36px;

             height: 36px;

             overflow: hidden;

         }

         .container-img img {

             position: absolute;

             top: -1px;

             right: -1px;

             background: url(img/common-icon.png) no-repeat;

             background-position: 0px 1px;

         }

     </style>

 </html>

3.margin聚焦解决办法

 <!DOCTYPE html>

 <html>

     <head>

         <meta charset="UTF-8">

         <title>margin聚焦解决方案</title>

     </head>

     <body>

         <p class="container-img">

             <img class="common-icon login-icon"  src="" width="38" height="38">

         </p>

     </body>

     <style type="text/css">

         .container-img {

             display: inline-block;

             width: 36px;

             height: 36px;

             overflow: hidden;

         }

         .common-icon {

             display: inline-block;

             background: url(img/common-icon.png) no-repeat;

             background-position: 0px 1px;

             margin: -1px;

         }

     </style>

 </html>

4.css隐藏

 img[src=""],img:not([src]){

     opacity: 0;

     border:none;

     visibility: hidden;

     max-width: none;

 }

关于img标签浏览器自带的边框，清除边框的解决方式(即img[src=""] img无路径情况下，灰色边框去除解决方法)的更多相关文章

  1. img标签src不给路径就会出现边框————记一次二笔的编码经历

    <img/>在src加载失败或没有给的,浏览器会自动给img加上边框. 如下图这样: 产品觉得影响美观,一定要pass掉. 原码是这样: .ctn{ position: relative; ...

  2. img标签src不给路径就会出现边框

    <img/>在src加载失败或没有给的,浏览器会自动给img加上边框. 如下图这样: 产品觉得影响美观,一定要pass掉. 原码是这样: .ctn{ position: relative; ...

  3. 谷歌chrome浏览器和火狐firefox浏览器自带http抓包工具和请求模拟插件

    谷歌chrome浏览器自带http抓包工具 chrome://net-internals/ 谷歌chrome浏览器http请求模拟插件:postman 火狐http请求模拟插件:httprequest ...

  4. 自定义右键菜单，禁用浏览器自带的右键菜单[右键菜单实现--Demo]

    许多从事Web开发的会发现有些事,我们需要禁用浏览器本事自带的右键菜单,而实现自定义的右键菜单下面我们也来实现一个自定义的右键菜单 首先来创建JSP页面 <%@ page language=&q ...

  5. 解决Flash和html在多标签浏览器中互访问题

    在Flash播放器运行时,将不同来源的资源划分到独立的沙箱(sandbox)内,不同沙箱之间不能 彼此操作数据(除非目标沙箱做过一些设置,授权其他沙箱可访问),这就是Flash的跨沙箱问题.当Flas ...

  6. angularjs 阻止浏览器自带的回退

    $scope.$on('$locationChangeStart', function(e) { if(!tfOrder && comm.getStorage('orederlistL ...

  7. 如何使用IE9浏览器自带开发人员工具捕获网页请求

    我们在通过浏览器访问一个网页的时候,有时候会遇到页面不能正常显示,图片不能正常加载的问题. 如果我们需要知道浏览器打开该网页时,网页中每个元素的加载情况.这时,我们便可以借助浏览器自带开发人员工具,来 ...

  8. 史上最全的CSS hack方式一览 jQuery 图片轮播的代码分离 JQuery中的动画 C#中Trim()、TrimStart()、TrimEnd()的用法 marquee 标签的使用详情 js鼠标事件 js添加遮罩层 页面上通过地址栏传值时出现乱码的两种解决方法 ref和out的区别在c#中 总结

    史上最全的CSS hack方式一览 2013年09月28日 15:57:08 阅读数:175473 做前端多年,虽然不是经常需要hack,但是我们经常会遇到各浏览器表现不一致的情况.基于此,某些情况我 ...

  9. Android ImageButton图像灰色边框

    灰色边框,是imageButton空间自带的. 第一种解决方案: android:scaleType="fitXY"//这个代码是:拉伸图片(不按比例)以填充的长宽.所以图像最后最 ...

随机推荐

  1. 重写 equals() 和 hashcode()

    重写equals() @Override public boolean equals(Object o) { if (this == o) return true; if (o == null || ...

  2. BZOJ4641 基因改造[KMP]

    这道题以前好像模拟的时候做过,当时不会做,于是用hash水过去了.. 正解是KMP,还是用当前字符与上一次相同字符位置的距离表示数组,于是数值相等时就代表相似.第一次出现用INF代替. 然后要匹配有多 ...

  3. 关于jq中input的value值clone的问题

    如果想将input进行克隆,然后在后面显示出来并修改input里面的文字,这时就会发现一个问题,就是你克隆出来的value值始终是你克隆时的value,检查页面元素你就会发现,这时需要对克隆之后的in ...

  4. mysqli在php7中的使用

    mysqli这个库还是比较繁杂的,这其中又分mysqli ,mysqli_stmt,mysqli_result......一堆类,特别乱 这里奉上thinkphp5.1中使用mysqli扩展的查询用法 ...

  5. Phaserjs怎样用ES6开发游戏

    想用ES6语法开发phaserjs游戏,是phaserCE,但是不知道怎么导入,总是报错,后来经过多次尝试,解决方法如下: 干脆不导入,直接暴露到window里,然后模块化的代码全部在window.o ...

  6. 51 Nod 阶乘后面0的数量

    1003 阶乘后面0的数量  基准时间限制:1 秒 空间限制:131072 KB 分值: 5 难度:1级算法题  收藏  关注 n的阶乘后面有多少个0? 6的阶乘 = 1*2*3*4*5*6 = 72 ...

  7. luoguP3353 在你窗外闪耀的星星

    P3353 在你窗外闪耀的星星 题目描述 飞逝的的时光不会模糊我对你的记忆.难以相信从我第一次见到你以来已经过去了3年.我仍然还生动地记得,3年前,在美丽的集美中学,从我看到你微笑着走出教室,你将头向 ...

  8. HDU 6136 Death Podracing (堆)

    题目链接 http://acm.hdu.edu.cn/showproblem.php?pid=6136 题解 完了,普及题都不会做了... 发现一个重要性质是只有相邻的人才会相撞,于是直接拿堆维护即可 ...

  9. Apicloud_(项目)网上书城01_前端搭建

    [本文皆在记录自己开发Apicloud项目过程,不具备教学水平性文章] 参考书籍<30天App开发从0到1> Apicloud_(项目)网上书城01_前端页面开发 传送门 Apicloud ...

  10. JavaWeb_响应和请求数据包

    Google浏览器 F12中Network->Header部分 <%@ page language="java" import="java.util.*&qu ...