Question

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

我当前的导航栏上方图片的html：

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

导航栏上方图片的当前CSS：

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

当我将鼠标悬停在Brackets中的链接上时，图像链接在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%);;}

CSS背景图像链接正确;没有在浏览器中显示

1 个答案: