Maison >interface Web >tutoriel CSS >Explication détaillée de la façon de supprimer la bordure grise lorsque img[src=''] img n'a pas de chemin
Explication détaillée de la façon de supprimer la bordure grise lorsque img[src=''] img n'a pas de chemin
- 高洛峰original
- 2017-03-28 10:25:224623parcourir
img[src=""] balise imgSolution pour supprimer la bordure grise sans chemin
1.JsMéthode de solution
<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.Positionnement absoluFocus sur la solution
<!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.margeFocus sur la solution
<!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 caché
img[src=""]{
opacity: 0;
}Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!
Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Méthode de mise en œuvre des effets de texte texte-ombreArticle suivant：Méthode de mise en œuvre des effets de texte texte-ombre