css img加载失败去除边框

本文共有535个字,关键词:

问题:在chrome浏览器中,图片加载失败,如果有alt属性会出现一个小图标和边框,如何去除?
解决:使用css样式去除
方法;
img{
display:block;
margin:0 auto;
min-width:160px;
max-width:194px;
height:240px;
line-height:240px;
border:none;
position:relative;
overflow:hidden;
}
img:after {
content:attr(alt);
font-size: 16px;
display: block;
position: absolute;
z-index: 2;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #efefef;
}

参考:https://bitsofco.de/styling-broken-images/?utm_source=CSS-Weekly&utm_campaign=Issue-206&utm_medium=web

版权声明:本文为作者原创,如需转载须联系作者本人同意,未经作者本人同意不得擅自转载。
添加新评论
暂无评论