如何調整菜單不透明度，但不是文本？

我想改變菜單顏色的不透明度，但不是文字，所以這會顯示我的容器的背景圖像。這裏是我的CSS代碼如何調整菜單不透明度，但不是文本？

.nav { 
    font-family: 'Lato', helvetica, sans-serif; 
    position: absolute; 
    left: 580px; 
    top: 42px; 
    background:#1f7f5c; 
    height:60px; 
    display:inline-block; 
} 

.nav ul { 
    list-style: none; 
} 

.nav ul li { 
    display: inline-block; 
} 

.nav li a { 
    color: #fff; 
    font-size:16px; 
    display:block; 
    line-height:60px; 
    margin: 0 0 0 -3px; 
    padding:0 26px; 
    font-family:'Open Sans', helvetica, arial; 
    text-shadow:0 0 1px rgba(255,255,255,0.5); 
} 

.nav ul li a:hover { 
    background-color: #2ecc71; 

}

來源

2014-01-09 user3152357

背景色用rgba()

.nav { 
    background-color: rgba(31, 127, 92, 0.75); /* 75% opacity */ 
} 

.nav ul li a:hover { 
    background-color: rgba(46, 206, 112, 0.75); 
}

來源

2014-01-09 06:36:37 Bobby

這是正確的，但值得注意的是它在舊版瀏覽器（IE8和更早版本）中不受支持。 http://caniuse.com/#feat=css3-colors – fyjham

在這種情況下，你將不得不爲早期版本的IE使用'ms-filter'。 – Bobby

@Bobby - 謝謝，它正在工作。你能告訴我如何編寫ms-filter，我不知道ms-filter。 – user3152357

在後臺標籤使用RGBA梅索德指定一個alpha通道，並指定不透明度。如果你使用opacity屬性會像

background: none repeat scroll 0 0 rgba(0, 0, 0, 0.6);

我用這對http://nationalspaceolympiad.com/頭被應用到所有的子元素。用螢火蟲檢查。

來源

2014-01-09 06:37:02

如果將不透明度應用於父節點，則所有子節點都會受到影響。我建議你不要使用不透明或阿爾法，你可以創建一個相同的顏色透明圖像&把它作爲你的背景。

來源

2014-01-09 08:26:51

如何調整菜單不透明度，但不是文本？

回答

相關問題