[分享]css中引用图片做图标不显示

在 CSS 中，我们经常使用图片来作为图标来装饰网页。但是，有时候我们会遇到这样一种情况，就是我们在引用图片做图标的时候，图片却没有显示出来。这种问题通常有以下几种可能性：1. 图片路径有误。在引用图...

在 CSS 中，我们经常使用图片来作为图标来装饰网页。但是，有时候我们会遇到这样一种情况，就是我们在引用图片做图标的时候，图片却没有显示出来。
这种问题通常有以下几种可能性：
1. 图片路径有误。在引用图片时，我们需要确保图片的路径是正确的。如果路径不正确，浏览器就无法找到这张图片，因此无法正确地显示出来。我们可以使用相对路径或者绝对路径来引用图片，但是不管使用哪种方式，都需要确保路径是正确的。
2. 图片文件已被删除或移动了位置。如果我们已经引用了一张图片，并在代码中指定了正确的路径，但是图片还是没有显示出来，那么有可能是因为这张图片被删除或者移动了位置。如果图片文件已经被删除，我们需要重新上传或者指定一个存在的图片文件。
3. 图片格式不正确。在使用图片作为图标时，我们需要使用一些特殊的图片格式，比如 PNG、SVG 或者 ICO 等格式。如果我们使用了错误的图片格式，那么也会出现图片无法显示的问题。
如果我们遇到图片无法显示的问题，可以按照以上的可能性来逐个排查，找到问题所在并解决之后，图片就能够正常地显示了。
下面是一个关于引用图片做图标不显示的示例代码：

<br>
// CSS 代码<br>
.icon {<br>
  background-image: url("images/icon.png");<br>
  background-repeat: no-repeat;<br>
  width: 20px;<br>
  height: 20px;<br>
}<br>

// HTML 代码<br>
<p class="icon">这是一个图标</p><br> 

在上面的代码中，我们定义了一个名为 "icon" 的 CSS 类，使用了一张名为 "icon.png" 的图片作为背景图，并将其应用到一个段落元素上。如果图片路径正确、图片文件存在，且图片格式正确，那么这张图片就能够正确地显示出来，并作为这个段落元素的背景图。