Question

我正在尝试显示上一个和下一个按钮，但是当我编译它时，它只是给我链接说＆＃39;之前＆＃39;和＆＃39; next＆＃39;而不是我想要的图像。下面我将首先展示CSS中的代码;

div#slideshow ul#nav li#prev a
{
    background: url(Resources/Icons/previous.png);
}

div#slideshow ul#nav li#next a
{
    background: url(Resources/Icons/next.png);
}

然后我在这里展示我是如何从asp调用它的;

<div id="slideshow">
    <ul id="nav">
        <li id="prev"><a href="#">Previous</a></li>
        <li id="next"><a href="#">Next</a></li>
    </ul>
</div>

对问题可能有什么建议？

Answer 1

使用：

<a href="#">Previous</a>

...会给你一个带有“Previous”的超链接作为文本。您的CSS可能会为列表项添加背景，但您仍然只会使用超链接。

替代方案的例子：

<input type="image" src="/path/to/image.gif" />

<a href="GoHere.html"><img src="/path/to/image.gif" alt="My Image" /></a>

<img src="/path/to/image.gif" alt="My Image" onclick="SomeJavaScript();" />

Answer 2

您的标记有效，因为图片会显示在<a></a>的innerHTML后面。

问题很可能是PNG路径的问题 - 尝试将png放在与html文件相同的文件夹中并使用url(next.png)

Answer 3

确保CSS文件路径相对于CSS文件，而不是HTML页面。

Answer 4

您传入的网址路径是相对于样式表的位置。因此，如果您的样式表位于/styles/css/themes.css，那么此处的背景图片将在/styles/css/Resources/Icons/XXX.png中查找。那是他们存放的地方吗？

Answer 5

您使用的是反模式Be Specific when Needed

请改用以下内容。 #prev a { ... }

#next a {
           ...
        }

Answer 6

您不应该设置标记的背景，因为它是内联元素。

您应该插入一个内部元素并设置它的样式以适应您的图像显示。

<div id="slideshow">         
<ul id="nav">             
    <li id="prev"><a href="#" title="prev"><div></div></a></li>             
    <li id="next"><a href="#" title="next"><div></div></a></li>         
</ul>

另外，由于您已经提供了标签ID，因此可以通过直接指定它们来显着缩短css定义。

#prev a div
{             
background: url(http://images.all-free-  download.com/images/graphicmedium/button_previous_89678.jpg);
height : 200px;
width : 200px;       
} 


#next a div
{             
background: url(http://images.all-free-download.com/images/graphicmedium/button_next_89675.jpg);
height : 200px;
width : 200px;            
}

有关工作示例，请参阅此fiddle

上一个和下一个链接

6 个答案: