css半透明背景圖像的白色文字背景顏色

這是一個問題，我有幾次，但並不確切地知道，如何解決這個問題：

我有一個半透明的背景圖像（例如透明的圓角），這也作爲一個漸變的背景顏色。（在這個例子中它是一個下拉導航按鈕：當你懸停按鈕，出現導航列表：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

來源

2012-07-27 Zaphoid

您需要爲圖像的非透明漸變部分添加額外的圖像。當您將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鍵來選擇任何菜單項。

來源

2012-09-04 16:52:36

這就是我一直在尋找的！謝謝！也感謝關於鍵盤導航的評論。我添加了訪問鍵到菜單項。 – Zaphoid 2012-09-06 12:16:49

css半透明背景圖像的白色文字背景顏色

回答

相關問題