CSS 元素 "Background"给 div 标签图片源

Question

我不确定我是否在标题中充分解释了我的问题。我正在尝试在菜单链接旁边添加“小箭头”，当我将它们悬停时，它们会移动并改变颜色。我在 Brackets 中开发，一切都运行良好，我不需要任何 Javascript，一切都由 CSS 完成。然后我尝试直接在浏览器中打开 html 文件，文件夹中的一些图像(箭头)没有出现。我也尝试使用 WebMatrix 进行相同的操作，结果是一样的。出现与箭头相同的文件夹中的背景和 Logo 图像，但仅此而已。当我将 CSS 中的背景 Url 更改为完整路径 C://../../arrow-right.png 时，它们会直接出现在 Webmatrix 和浏览器中，但在通过括号打开时不会出现。

HTML部分

<ul>
  <li><a href="#"><img src="images/Logo.png" alt="logo"></a></li>
  <li><a href="#">The Product</a></li>
  <li><a href="#">Order Yours</a></li>
  <li><a href="#">About Us</a></li>
  <li>
   <a href="#">Support 
    <div class="rectangle">.<div class="arrow-down">.</div></div> 
   </a>
   <div id="sub-menu">
     <ul>
       <li><a href="#">Read our FAQ <div class="arrow-right">.</div></a></li>
       <li><a href="#">Post a Support Ticket <div class="arrow-right">.</div></a></li>
       <li><a href="#">Orders &amp; Shipping <div class="arrow-right">.</div></a></li>
     </ul>
    </div>
  </li>
  <li><a href="#">Get in touch with us</a></li>

还有 CSS:

    .arrow-right {
        color: transparent;
        position: absolute;
        top: 19px;
        right: -200px;
        background: url(images/arrow-right.png) no-repeat;
        width: 100%;
    }

    .rectangle {
        color: transparent;
        width: 15px;
        height: 80px;
        position: absolute;
        top: 0;
        right: 0;
        background: url(images/Background.png);
        z-index: 1; 
    }

    .arrow-down {
        background: url(images/arrow-down.png) no-repeat;
        color: transparent;
        position: relative;
        top: 20px;
        width: 8px;
        height: 6px;
        left: 4px;
    }

我还尝试将背景图像直接添加到 div 标签中并仅编辑其位置，这样箭头图像也会显示出来，但如果没有 Javascript，我将无法移动/更改颜色。

我知道您看不到任何图片，但我希望有人知道为什么会这样。

为什么只有Brackets 理解CSS 中的Background: url(..) 而其他人直接在div 样式中需要它？我真的对这些奇怪的行为感到困惑。

Answer 1

在 Brackets 中，有一个内置的预览器，因此即使是相对路径也能正常工作。

在浏览器中查看，需要指定完整路径，因为它不会在服务器上运行自动计算完整路径。