html - CSS 背景图片链接正确；不在浏览器中显示

Question

我想在导航栏上方放置一个图像，然后在导航栏后面放置一个背景图像。

导航栏上方图片的当前 html:

<div class="viewport-1"></div>

导航栏上方图像的当前 CSS:

.viewport-1
{
background-size: cover;
background-image: url('saultitle.png');
height: 100vh;
}

图像在 CSS 工作表中链接，每当我将鼠标悬停在括号中的链接上时它就会显示，并且网页中应该有图像的间隙 - 但它没有显示。

至于导航栏图像，没有间隙，因为它是背景图像，但它也在 CSS 表中链接。

导航栏 HTML

<div id="nav">

<table class="nav">

<tr>

<td><a href="#getting-his-start">Getting his Start</a></td>
<td><a href="#cinematic-revolution">Cinematic Revolution</a></td>
<td><a href="#experimental-phase">The Experimental Phase</a></td>
<td><a href="#logos-made-to-last">Logos Made to Last</a></td>
<td><a href="#the-nect-big-thing">The Next Big Thing</a></td>
<td><a href="#his-influence-today">His Influence Today</a></td>

</tr>

</table>
            </div>

导航栏 CSS

.nav { 
background-image: url('goldenarm.png');
width:100%;
padding:1em 0;

关于为什么他们不显示的任何建议？

Answer 1

你可以使用:

#nav {
    position: relative;
    overflow: hidden;
}

.viewport-1 {
    background-size: cover;
    background-image: url('saultitle.png');
    height: 100%;
    background-color: #333;
    width: 100%;
    top: 0;
    position: absolute;
    transition: all ease-in-out 0.5s;
}

https://jsfiddle.net/nnwn7jbg/1

#nav:hover .viewport-1 {transform: translate(00%,-100%);;}