Question

我只是把一个图像作为一个锚点，我老实说不明白为什么它不起作用：锚点没有任何亮点和任何东西。这是主要部分的代码（锚名称为“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;

}

为什么？

更新好吧，我应用了你给我的解决方案并且它没有用，所以我将详细说明：

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

这是类“中间主”和“文章”的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”默认显示为none，因为它在我通过jQuery调用后以FadeIn的形式出现。

Answer 1

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

即在网址中使用''。

Answer 2

您需要将display: block;添加到.exit

Answer 3

这不起作用，因为<a>是内联元素，而且由于您没有任何内容，因此不会显示任何内容。

您需要更改CSS并首先将其display作为block或内联块元素并定义大小。

看我的小提琴： http://jsfiddle.net/N86gN/

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

Answer 4

您需要提供a-tag display：block，否则它是内联的！

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

为什么这个锚图像不起作用？

4 个答案: