CSS Url将图像显示为纯色答案

【问题标题】：CSS Url is displaying image as solid colorCSS Url将图像显示为纯色
【发布时间】：2021-05-28 15:22:04
【问题描述】：

我尝试在 CSS 中通过url() 导入.png 文件，但按钮最终成为图像中的纯色，而不是图像本身。我尝试了不同的图像，它只是加载了不同的纯色。

导航栏应该是纯色的，角落里有按钮，但它会受到周围元素的模糊影响。我试着弄乱z-index，但这并没有改变任何东西。我尝试去除模糊，它修复了模糊渐变，但这对我来说不是问题，.png 仍然无法正确加载。

我仍在尝试使用 CSS，这很可能是因为在不了解 CSS 核心的情况下混合了不同的教程，但我想了解它们为什么会发生冲突。

【问题讨论】：

【解决方案1】：

问题是您的图片网址返回的是 HTML 而不是图片。试试去https://tumuy.csb.app/assets/icons/x.png。

【讨论】：

所以，当我研究 create-react-app 文档时，我意识到我的原始代码是用 JS、HTML 和 CSS 编写的。对于我的实际项目，我没有使用 React。我将我的项目转换为 CodeSandbox，只是因为我有一个帐户。我无法在常规 HTML 中从“../assets/icons/x.png”导入 xSymbol。这是我创建问题时的错。

【解决方案2】：

你能上传你的代码吗？您是否尝试添加离线和在线图片？

【讨论】：

【解决方案3】：

在代码示例中，问题是“css class”的名称，您必须使用“class”而不是“className”。

你能先解决这个问题吗？

Warning: Invalid DOM property `class`. Did you mean `className`?
div
div
Navbar 
    in div (created by Navbar)
    in Navbar

【讨论】：

【解决方案4】：

见：https://codesandbox.io/s/glass-form-forked-hcb20

Codesandbox 未使用相对 URL 提供图像。我已将其转换为 blob 并使用它。只是一个 hack，但现在可以使用。

【讨论】：

【解决方案5】：

不要在样式中使用 class 在 className 中替换它，因为它直接链接到 reactjs 以在 reactjs 中进行样式设置。 class 选择 css 而在 react 你给 className 用于响应样式。您还可以使用它的 Id 来设置元素的样式

【讨论】：

【解决方案6】：

在尝试了这么多事情之后，我随机尝试调整我的background-size: 100% 并得到了我想要的结果。

【讨论】：