Rumah >hujung hadapan web >tutorial css >详解img[src=""] img无路径情况下，灰色边框去除解决方法
详解img[src=""] img无路径情况下，灰色边框去除解决方法
- 高洛峰asal
- 2017-03-28 10:25:224589semak imbas
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=""]{
opacity: 0;
}Atas ialah kandungan terperinci 详解img[src=""] img无路径情况下，灰色边框去除解决方法. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：text-shadow文字特效实现方法Artikel seterusnya：使用CSS3进行样式效果增强的详细介绍