CSS问题:(答案 - 爱码网

【问题标题】：CSS problems :(CSS问题:(
【发布时间】：2013-08-05 04:47:22
【问题描述】：

你好:) 我一直在尝试为我们的网站制作一些不错的悬停效果。但是，当页面加载时，它不会加载 CSS - 背景图像，我们会得到一些奇怪的闪烁效果。我已经尝试了几乎所有我认为的东西。而我们就是无法让它发挥作用。我会链接 HTML 和 CSS 来解决问题。

这是 HTML，以及包含 CSS 的 div。这个 div 在一个 main content div 和一个 content div 中。

<div class="produkt_links">
    <div id="produkt_7"><a href="produkt_1.html"></a></div>
</div>

CSS：

.produkt_links #produkt_7 a {
display: block;
width: 300px;
height: 290px;
background-image:url(../../images/mainpage%20links/arch_low.png);   
}

.produkt_links #produkt_7 a:hover {
background-image:url(../../images/mainpage%20links/arch_low_hover.png); 
}

PS。我试过精灵。不工作。在 Safari、Chrome 和 firefox 中尝试过...

干杯，MM。

【问题讨论】：

CSS 的其余部分是否有效？
您使用的是相对路径，它们对于 css 文件所在的路径是否正确，您是否尝试过使用绝对 url？
我建议为您的问题使用适当的标题。由于您使用 css 标记它，我们已经知道您遇到了 CSS 问题。
问题的标题应该简要描述问题是什么，问题的主体应该描述你的目标，你尝试了什么，以及结果与预期有何不同。

标签： css image background

【解决方案1】：

您需要更正使用的（公共）资源的路径

background-image:url(../../images/mainpage%20links/arch_low.png);

如果根文件夹是public_html，那么-

public_html
 > images
   > mainpage links
     > arch_low.png

然后使用这个 -

background-image:url("images/mainpage%20links/arch_low.png");

【讨论】：

不太明白。我只是使用 CSS 中的 url 浏览器直接链接到网站文件夹中的图像 - 主要内容文件夹。

【解决方案2】：

您还没有编写太多其他代码，但我建议您首先尝试在 CSS 中应用不是图像的东西。例如：

.produkt_links #produkt_7 a {
display: block;
width: 300px;
height: 290px;
color: blue;   
}

.produkt_links #produkt_7 a:hover {
    color:red; 
}

如果这不起作用，请检查 CSS 文件是否正确链接到 HTML 文件。

否则，请检查服务器上图片的路径是否正确。

【讨论】：