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

时间：2021-10-26 22:27:48

详解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;

 }

相关文章