背景图像不适用于本地图像？答案

【问题标题】：background-image not working with local images?背景图像不适用于本地图像？
【发布时间】：2018-06-16 18:52:54
【问题描述】：

我尝试了一切以使用本地图像显示背景图像。我知道我有正确的图像位置。因为如果我使用 content:url();有用。

Background-image 也适用于来自互联网的 url 图片位置。但它不会用我的本地图像渲染。我已经尝试了所有可能的位置，但它不会呈现。

这是css的路径：

<link rel="stylesheet" href="stylesheets/myCSS.css" type="text/css" media="screen">

我的 images 文件夹与我的 css 文件夹在同一路径中。

以下是HTML代码：

  <div class="col-md-2">
    <p>start here</p>
   <a href="#" class="angelhack"></a>
  </div>

现在是 CSS：enter code here

  .col-md-2 .angelhack {
  height: 65px;
  width: 188px;
  display: block;
  background-image: url(myPicture.jpg) no-repeat 0px 0px;
  z-index: 1;
  }

 .col-md-2 .angelhack:hover {
  background-image: url('http://4.bp.blogspot.com/-SWLJdR2_YzE/TWB-
EvvBWpI/AAAAAAAAA6U/MVtkwJXED88/s320/donkey.png');
  }

在有人将此问题标记为重复问题之前，我已经在 StackOverFlow 上搜索了此问题的所有答案并遵循了所有建议，但我仍然无法获得要渲染的图片。我知道图片在正确的位置，因为使用 Chrome 和 content:url();图像有效。有什么建议吗？

【问题讨论】：

您应该发布带有问题的代码，其中您给出了本地图像路径，而不是根据您的工作原理。我个人认为你的本地路径有问题。
你可以检查 devtools 是否显示任何错误？
已检查开发工具，没有错误。
如果您注意到它奇怪地没有显示，那么它可能被您的广告拦截器捕获。关闭您的广告拦截器并明智地命名图像，即。不要包含单词ad

标签： html css image

【解决方案1】：

你错过了你的 "" 引号

background-image: url(myPicture.jpg);

有

background-image: url("myPicture.jpg");

试试，

background: url("myPicture.jpg");

另外，

“下面”和“上面”是指子目录和父目录。相对文件路径为我们提供了一种双向旅行的方式。看一下我的原始示例：

以下是您需要了解的有关相对文件路径的所有信息：

以“/”开头返回根目录并从那里开始
以“../”开头的目录向后移动一个目录并从那里开始
以“../../”开始向后移动两个目录并开始那里（等等...）
要继续前进，只需从第一个子目录开始并保持前进

【讨论】：

感谢路径的解释，你保存了我的项目！

【解决方案2】：

我使用了background 而不是background-image，它工作正常。它假定 pic 与您的 html 位于同一文件夹中。

.col-md-2 .angelhack {
  height: 65px;
  width: 188px;
  display: block;
  background: url("myPicture.jpg") no-repeat 0px 0px;
  z-index: 1;
  }

【讨论】：

【解决方案3】：

编辑：忽略了 url 的文件路径不在双引号中。

变化：

 background-image: url("myPicture.jpg") no-repeat 0px 0px;

收件人：

 background-image: url("myPicture.jpg");
 background-repeat: no-repeat;

【讨论】：

【解决方案4】：

试试这个，看看它是否有效。

.col-md-2 .angelhack {
    background: url("../images/bg.jpg") no-repeat;
//Set your path in the double quote's 
  }

【讨论】：

我试过了。那是我的形象的确切路径。它在图像文件夹中。但我也尝试复制它并将其放入我的 css 文件夹和我的 html 文件夹中。
你能用给你这个问题的路径更新你的问题代码，以便我们可以使用它。

【解决方案5】：

你唯一的问题是你写background-image的方式

不要这样写

background-image: url('mypicture.jpg') no-repeat 50px 50px; //the size isn't good there

这样做

background-image: url('mypicture.jpg') no-repeat;
background-size: 50px 50px;

会是这样的

【讨论】：