我只是将图像作为 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 调用它后以淡入形式出现时默认不显示。
最佳答案
在 a.exit 中 css 将 background-image: url(img/exit.svg);
更改为 background-图片:url('img/exit.svg');
即在 url 中使用 ''。
关于html - 为什么这个 anchor 图像不起作用?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24711503/