[英]css background color for white text with semi-transparent background image
我会试试我的第一个问题。
这是一个问题,我遇到过几次,但不完全知道如何解决它:
我有一个半透明的背景图像(例如透明的圆角),它也作为渐变背景颜色。 (在本例中,它是一个用于下拉导航的按钮:当您将鼠标悬停在按钮上时,会出现导航列表。)
这是代码:
<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>
并为其指定背景颜色,但由于我的图像具有渐变,因此您会看到跨度的背景颜色。
任何想法如何解决这个问题? 非常感谢您提前!
克里斯
您需要为图像的非透明渐变部分提供额外的图像。 将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;
}
请注意,如果您想创建一个可访问的站点,您还应该考虑提供键盘导航。 现在您无法使用Tab
键选择任何菜单项。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.