背景图片无法使用本地图片？

Question

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

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

这是css的路径：

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

我的图片文件夹与我的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和内容：url（）;图像有效。有什么建议吗？

Answer 1

您错过了""报价

background-image: url(myPicture.jpg); 

使用

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

<强>尝试，

background: url("myPicture.jpg");

同时

• 图像与引用它的文件位于同一目录中吗？
• 目录位于
目录下
• 目录上方？

在＆＃34;下面＆＃34;和＆＃34;以上＆＃34;，我的意思是子目录和父目录。相对文件路径为我们提供了双向旅行的方式。看看我的原始示例：

以下是您需要了解的相关文件路径：

• 以＆＃34; /＆＃34开头;返回根目录并从那里开始
• 以＆＃34; ../"开头;向后移动一个目录并从那里开始
• 以＆＃34; ../../&# 34开头;向后移动两个目录并启动 那里（等等......）
• 要继续前进，只需从第一个子目录开始并保持 前进

Answer 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;
  }

Answer 3

编辑：忽略了网址的文件路径不是双引号。

变化：

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

要：

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

Answer 4

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

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

Answer 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;

看起来像这样