Question

所以，我已经编程了几年了，因为HTML和CSS不是编程语言而一直在制作一个网站，并且由于某种原因，他们让我迷惑不解！

这是我jsfiddle的链接，我有HTML和CSS代码，我会显示图像，并在悬停时显示不同的图像。我记得几年前在C.S.的入门课程中这样做。

在查看了如何简单地执行此操作的多个示例之后，复制代码并实现我的图像，其中示例代码具有自己的图像，并且仍然出现空白屏幕，我来找你们给我们看看我很想念的愚蠢的事情。

提前抱歉这是多么基本！

HTML：

<body> 
    <a href="#" class="about" title="Learn more about me!"></a> 
    <a href="#" class="work" title="Look at what I made!"></a>
    <a href="#" class="contact" title="Talk to me!"></a> 
</body>

CSS：

.about {
    width:400px;
    height: 200px;
    display: block;
    background-size: contain;
    background-repeat: no-repeat;
    background-image: url(/images/about.png);
}
.about:hover {
    background-size: contain;
    background-repeat: no-repeat;
    background-image: url(/images/aboutHover.png);
}

.work {
    width:400px;
    height: 200px;
    display: block;
    background-size: contain;
    background-repeat: no-repeat;
    background-image: url(/images/work.png);
}
.work:hover {
    background-size: contain;
    background-repeat: no-repeat;
    background-image: url(/images/workHover.png);
}

.contact {
    width:400px;
    height: 200px;
    display: block;
    background-size: contain;
    background-repeat: no-repeat;
    background-image: url(/images/contact.png);
}
.contact:hover {
    background-size: contain;
    background-repeat: no-repeat;
    background-image: url(/images/contactHover.png);
}

我的主树：

[SITE]-
    |—index.html
    |
    |—[ css ]
    |   |—base.css
    |   
    |—[ images ]
    |   |—about.png
    |   |—aboutHover.png
    |   |—contact.png
    |   |—contactHover.png
    |   |—name.png
    |   |—nameHover.png
    |   |—work.png
    |   |—workHover.png
    |
[SITE]-

Answer 1

如果索引文件的relative path位于同一级别，则

/images应为images。

background-image: url(images/workHover.png);

dir/index.html = ../images上一个目录并下到图片

dir/dir/index.html = ../../images上升两个导演并进入图像

Answer 2

试试这个

<body>

        <a href="#" class="about" >Learn more about me!</a> 
        <a href="#" class="work" >Look at what I made!</a>
        <a href="#" class="contact">Talk to me!</a> 
    </body>

HTML / CSS图像导航菜单

2 个答案: