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>中并给它一个背景颜色，但是当我的图像有一个渐变时，你会看到跨度的背景颜色。

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

克里斯

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键选择任何菜单项。

css白色文本的背景颜色与半透明背景图象

1 个答案: