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

【问题标题】：Why this anchor image doesnt work?为什么这个锚图像不起作用？
【发布时间】：2014-07-12 17:58:46
【问题描述】：

我只是将图像作为锚点，老实说，我不明白为什么它不起作用：锚点什么都不做，没有亮点，什么都没有。这是主要部分的代码（锚在“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 容器之外的任何位置时，它可以工作、悬停并且可点击，但是当我将它放在里面时，该位置无关紧要，它会停止工作。

这是“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 调用它后它以 FadeIn 的形式出现。

【问题讨论】：

添加显示：内联块；到你的 CSS。

标签： html css

【解决方案1】：

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

即在 url 中使用 ''。

【讨论】：

【解决方案2】：

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

【讨论】：

【解决方案3】：

你需要给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】：

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

您需要更改 CSS，首先将 display 设为 block 或 inline-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;

}

【讨论】：

仍然不想工作。我更新了我的帖子，谢谢。