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

来源：动视网责编：小采时间：2020-11-27 18:52:07

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

详解img[src=""]img无路径情况下，灰色边框去除解决方法:img[src=""] img标签无路径情况下，灰色边框去除解决方案1.Js解决办法<html> <head> <meta charset="UTF-8"> <title></title> </head> <body&

推荐度：

点击下载本文 文档为doc格式

导读详解img[src=""]img无路径情况下，灰色边框去除解决方法:img[src=""] img标签无路径情况下，灰色边框去除解决方案1.Js解决办法<html> <head> <meta charset="UTF-8"> <title></title> </head> <body&

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隐藏