Heim > Artikel > Web-Frontend > Ausführliche Erklärung, wie man den grauen Rand entfernt, wenn img[src=""] img keinen Pfad hat

Ausführliche Erklärung, wie man den grauen Rand entfernt, wenn img[src=""] img keinen Pfad hat

高洛峰Original: 2017-03-28 10:25:224511Durchsuche

img[src=""] img tagLösung für die Entfernung grauer Ränder ohne Pfad

1.JsLösungsmethode

<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.Absolute PositionierungFokus auf die Lösung

<!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.MargeFokus auf die Lösung

<!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 ausgeblendet

img[src=""]{
opacity: 0;
}

Das obige ist der detaillierte Inhalt vonAusführliche Erklärung, wie man den grauen Rand entfernt, wenn img[src=""] img keinen Pfad hat. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Implementierungsmethode für Textschatten-TexteffekteNächster Artikel：Implementierungsmethode für Textschatten-Texteffekte

In Verbindung stehende Artikel

Mehr sehen