Question

我不确定我在标题中解释了我的问题。我试图添加小箭头＆＃39;在菜单链接旁边，当我将它们悬停时，它们会移动+更改颜色。我在Brackets开发，一切都很完美，我不需要任何Javascript，一切都是由CSS完成的。然后我尝试直接在浏览器中打开html文件，并且不显示文件夹中的一些图像（箭头）。我也尝试使用WebMatrix，结果是一样的。出现背景和徽标图像，与箭头相同的文件夹，但这就是全部。当我将CSS中的背景URL更改为完整路径C：//../../arrow-right.png时，它们直接出现在Webmatrix和浏览器中，但不是通过Brackets打开时。

HTML部分

＆＃13;

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

＆＃13;

CSS：

＆＃13;

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

＆＃13;

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

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

为什么只有Brackets理解背景：CSS中的url（..）但其他人需要直接使用div风格？我对这些奇怪的行为感到很困惑。

Answer 1

在Brackets中，有一个内置的预览器，所以即使是相对路径也可以工作。

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

CSS元素＆＃34;背景＆＃34;给div标签图像源

1 个答案: