原文版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
原文链接:https://blog.csdn.net/qq_41964720/article/details/131397016
原文作者:grapelet_kmw于 2023-06-26 14:41:12 发布
————————————————————————————————————————————————————
当img标签只设置宽度和高度,不设置src属性时,可能会出现边框。可以通过CSS的否定伪类选择器`:not([src])`,将无src属性的img透明度设为0,从而消除边框。
img标签只设置了宽度和高度,没有设置src属性,图片出现了边框
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>Document</title> 7 <style> 8 img{ 9 width: 100px; 10 height: 100px; 11 } 12 </style> 13 </head> 14 <body> 15 <img src="" alt=""> 16 </body> 17 </html>
解决的方案:
img:not([src]){opacity:0;
}
使用CSS的一个否定伪类选择器,将没有src属性的img的透明度设置为0,就可以解决图片有边框的问题