html - 具有半透明背景图像的白色文本的 css 背景颜色

Question

我会尝试回答我的第一个问题。

这是个问题，我遇到过几次，但不知道如何解决:

我有一个半透明的背景图像(例如透明的圆 Angular )，它也作为渐变背景颜色。(在此示例中，它是一个用于下拉导航的按钮:当您将鼠标悬停在该按钮上时，将出现导航列表。)

代码如下:

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

现在，如果我给链接一个背景颜色(除了图像之外)它会覆盖透明 Angular 。我还尝试将文本放在 <span> 中并给它一个背景颜色，但由于我的图像有渐变，所以你会看到跨度的背景颜色。

有什么解决办法吗？非常感谢您!

克里斯

Answer 1

对于图像的非透明渐变部分，您需要一个额外的图像。当您将 span 添加到链接时，您可以设置 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 键来选择任何菜单项。