css半透明背景图像的白色文字背景颜色

Question

我会试试看我的第一个问题。

这是一个问题，我有几次，但并不确切地知道，如何解决这个问题：

我有一个半透明的背景图像（例如透明的圆角），这也作为一个渐变的背景颜色。 （在这个例子中它是一个下拉导航按钮：当你悬停按钮，出现导航列表：http://christoph-merk.de/newi/test-1.html）

下面的代码：

<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开发人员工具栏），背景图像会消失，您不能再看到白色文本。

现在，如果我给链接一个背景颜色（在图像的附加），它会覆盖透明的角落。 我也尝试将文本放在<span>中并给它一个背景颜色，但由于我的图像有一个渐变，所以您会看到该跨度的背景颜色。

任何想法如何解决？ 非常感谢您提前！

Chris

Answer 1

您需要为图像的非透明渐变部分添加额外的图像。当您将span添加到链接时，您可以设置范围的样式以使背景颜色为纯色背景和。

+------------------------------------------------+ 
| a: Gradient and shadow       | 
| +---------------------------------------------+| 
| | a > span: Solid gradient + background color || 
| +---------------------------------------------+| 
+------------------------------------------------+ 

所以，HTML：

<a id="top-navi-button" href="#"><span>Navigation</span></a> 

和CSS是这样的：

a#top-navi-button { 
    background: url(top-navi-button.png) no-repeat; 
} 

a#top-navi-button span { 
    background: url(top-navi-solid_gradient.png) #00F; 
} 

请注意，如果你想创建一个可访问的网站，你也应该考虑提供keyboard navigation。现在，您不能使用Tab键来选择任何菜单项。