我会尝试我的第一个问题。
这是一个问题,我有几次,但不完全知道,如何解决它:
我有一个半透明的背景图像(例如透明的圆角),它也作为渐变背景颜色。(在本例中,它是一个下拉导航按钮:当您悬停该按钮时,会出现导航列表。)
这是代码:
<div id="top-navi"><a id="top-navi-button" href="#" >Navigation</a>
<ul>
<li><a href='#'>bla</a></li>
<li><a href='#'>blubb</a></li>
</ul>
</div>
CSS:
#top-navi {
position: fixed;
top: 0px;
left: 6%;
z-index: 1000;
}
#top-navi a#top-navi-button {
float: left;
width: 130px;
height: 20px;
padding: 5px 10px 5px 20px;
background: url(../img/top-navi-button.png) no-repeat;
color: #FFF;
font-size: 120%;
text-decoration: none;
}
#top-navi a#top-navi-button:hover,
#top-navi a#top-navi-button:focus {
text-decoration: underline;
}
按钮上的文字是白色的。因为我想让网站易于访问,所以我没有将文本放在图像上,而是用 html 编写(以便屏幕阅读器可以阅读)并将其设置为白色。直到这里,这工作得很好。
现在,我想让它更易于访问,因此您可以使用所有功能,即使图像已停用。如果我这样做(例如,使用 FF 开发人员工具栏),背景图像就会消失,您将无法再看到白色文本。
现在,如果我给链接一个背景颜色(除了图像)它会覆盖透明的角落。我还尝试将文本放入 a<span>
并为其赋予背景颜色,但由于我的图像具有渐变,因此您会看到跨度的背景颜色。
任何想法如何解决这个问题?非常感谢您!
克里斯