在网页开发中，我们经常会使用 CSS 来
自定义图片的样式，比如
添加边框、阴影、圆角等
效果。不过，有时我们在 CSS 中
添加一个背景
图片或者在
图片上再
添加一张
图片时，可能发现
图片并没有
显示出来，这是怎么回事呢？
其实，这个问题的出现可能有多种原因。其中，最常见的一种情况是我们在 CSS
代码中指定了
错误的路径或者
文件名。为了
解决这个问题，我们可以使用 Chrome 浏览器的开发者工具（DevTools）来检查
错误。在 DevTools 中，可以选择 Elements 面板并查看相关元素的 CSS
属性。如果
图片的路径或者
文件名
错误，那么在对应的
属性值中就会出现红色的
错误提示。
另外，如果我们想要在
图片上再
添加一张
图片，那么需要使用 CSS 中的伪元素（::before 或 ::after）。例如，我们可以使用以下的 CSS
代码来在一张
图片上
添加一个圆形的图标：
```
img {
position: relative;
}
img::before {
content: '';
position: absolute;
top: 0;
right: 0;
width: 30px;
height: 30px;
background-image: url('icon.png');
background-repeat: no-repeat;
}
```
注意，这里的 img 元素必须具有 position: relative
属性，否则伪元素的定位不会按照我们所期望的方式进行。
综上所述，如果在 CSS 中
添加图片时出现了
不显示的情况，我们需要仔细检查
代码中的路径和
文件名是否正确，并且注意伪元素的相关
用法。这样，我们才能正确地实现我们所需要的
效果。
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
