详解img[src=""] img无路径情况下，灰色边框去除解决方法
1.Js解决办法
1 <html> 2 <head> 3 <meta charset="UTF-8"> 4 <title></title> 5 </head> 6 <body> 7 <img src="error.jpg" onerror="whenError(this)"> 8 </body> 9 <script> 10 function whenError(a){ 11 a.onerror=null; 12 a.src='path_default.jpg'; 13 console.log('图片出错的时候调用默认的图片'); 14 } 15 </script> 16 </html>
2.绝对定位聚焦解决方案
1 <!DOCTYPE html> 2 <html> 3 4 <head> 5 <meta charset="UTF-8"> 6 <title>absolute聚焦解决方案</title> 7 </head> 8 9 <body> 10 <p class="container-img"> 11 <img class="common-icon login-icon" src="" width="38" height="38"> 12 </p> 13 14 </body> 15 <style type="text/css"> 16 .container-img { 17 position: relative; 18 display: inline-block; 19 width: 36px; 20 height: 36px; 21 overflow: hidden; 22 23 } 24 .container-img img { 25 position: absolute; 26 top: -1px; 27 right: -1px; 28 background: url(img/common-icon.png) no-repeat; 29 background-position: 0px 1px; 30 } 31 </style> 32 33 </html>
3.margin聚焦解决办法
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>margin聚焦解决方案</title> 6 </head> 7 8 <body> 9 <p class="container-img"> 10 <img class="common-icon login-icon" src="" width="38" height="38"> 11 </p> 12 13 </body> 14 <style type="text/css"> 15 .container-img { 16 display: inline-block; 17 width: 36px; 18 height: 36px; 19 overflow: hidden; 20 } 21 .common-icon { 22 display: inline-block; 23 background: url(img/common-icon.png) no-repeat; 24 background-position: 0px 1px; 25 margin: -1px; 26 } 27 </style> 28 </html>
4.css隐藏
1 img[src=""],img:not([src]){ 2 opacity: 0; 3 border:none; 4 visibility: hidden; 5 max- none; 6 }