html - 为什么这个 anchor 图像不起作用？

Question

我只是将图像作为 anchor ，老实说，我不明白为什么它不起作用: anchor 什么都不做，不突出显示，什么都不做。这是主要部分的代码( anchor 在类名“exit”下):

<section id="main">
            <main class="container-fluid">
                <div class="row">

                    <div class="col-xs-2">
                    </div> 

                    <div class="col-xs-5 middle-main">

                     <a href="#" class="exit"></a>

                        <article class="article">

                        </article>

                    </div>

                    <div class="col-xs-3 middle-right">
                        <aside>


                        </aside>
                    </div>

                    <div class="col-xs-2">
                    </div>
                </div>
            </main>
        </section>

        <div class="container-fluid" id="footer">
        </div>

这是 CSS:

a.exit  {
    background-image: url(img/exit.svg);
    background-repeat: no-repeat;
    height:16px;
    width:16px;
    float:right;
    opacity:0.8;

}

a.exit:hover {
    opacity:1;

}

这是为什么？

更新:好的，我应用了您提供的解决方案，但效果不佳，所以我将详细说明:

当我将 anchor 放在“中间主”div 容器之外的任何地方时，它可以工作、悬停并且可以点击，但是当我把它放在里面时，这个地方并不重要，它停止工作。

这是类“middle-main”和“article”的 CSS:

.middle-main {
    display:none;
    max-width: 600px;
    min-width:300px;
    position:relative;
    bottom:30px;
    background-color: rgba(0,127,92, 0.4); /*0.4 #007F5C;*/
    padding: 0px 4px 4px 0px;
    z-index:-1;

}

.article {
    background-color: rgba(225,255,255, 1); /*0.8 #E1D4D4;*/
    background-image: ;
    color:black;
    padding: 5px  30px 25px 30px;
    }


.article h1 {
    text-transform: uppercase;
}

因此，“middle-main”在我通过 jQuery 调用它后以淡入形式出现时默认不显示。

Answer 1

在 a.exit 中 css 将 background-image: url(img/exit.svg); 更改为 background-图片:url('img/exit.svg');

即在 url 中使用 ''。