如何從我的CSS3菜單中刪除透明度

我有我的菜單下面的CSS設置： -如何從我的CSS3菜單中刪除透明度

.wrap { 
    width: 100%; 
    margin-bottom: 1%; 

} 

nav { 
    background: -webkit-gradient(linear, center top, center bottom, from(#fff), to(#ccc)); 
    background-image: linear-gradient(#fff, #ccc); 
    border-radius: 6px; 
    box-shadow: 0px 0px 4px 2px rgba(0,0,0,0.4); 
    padding: 0 10px; 
    position: relative; 
} 

.menu li { 
    float: left; 
    position: relative; 
    list-style-type: none; 
    /*background: url('img/denim.png'); 
    font-family: 'Droid Sans', sans-serif;*/ 
} 

.menu li a { 
    color: #444; 
    display: block; 
    font-size: 14px; 
    line-height: 20px; 
    padding: 6px 12px; 
    margin: 8px 8px; 
    vertical-align: middle; 
    text-decoration: none; 
} 

.menu li a:hover { 
    background: -webkit-gradient(linear, center top, center bottom, from(#ededed), to(#fff)); 
    background-image: linear-gradient(#ededed, #fff); 
    border-radius: 12px; 
    box-shadow: inset 0px 0px 1px 1px rgba(0,0,0,0.1); 
    color: #222; 
} 

/* Dropdown styles */ 

.menu ul { 
    position: absolute; 
    left: -9999px; 
    list-style: none; 
    opacity: 0; 
    transition: opacity 1s ease; 
} 

.menu ul li { 
    float: none; 
} 

.menu ul a { 
    white-space: nowrap; 
} 

/* Displays the dropdown on hover and moves back into position */ 
.menu li:hover ul { 
    background: rgba(255,255,255,0.7); 
    border-radius: 0 0 6px 6px; 
    box-shadow: inset 0px 2px 4px rgba(0,0,0,0.4); 
    left: 5px; 
    opacity: 1; 
} 

/* Persistant Hover State */ 
.menu li:hover a { 
    background: -webkit-gradient(linear, center top, center bottom, from(#ccc), to(#ededed)); 
    background-image: linear-gradient(#ccc, #ededed); 
    border-radius: 12px; 
    box-shadow: inset 0px 0px 1px 1px rgba(0,0,0,0.1); 
    color: #222; 
} 

.menu li:hover ul a { 
    background: none; 
    border-radius: 0; 
    box-shadow: none; 
} 

.menu li:hover ul li a:hover { 
    background: -webkit-gradient(linear, center top, center bottom, from(#eee), to(#fff)); 
    background-image: linear-gradient(#ededed, #fff); 
    border-radius: 12px; 
    box-shadow: inset 0px 0px 4px 2px rgba(0,0,0,0.3); 
} 




@font-face { 
    font-family: 'IconicStroke'; 
    src: url("~/fonts/iconic/iconic_stroke.eot"); 
    src: local('IconicStroke'), 
     url("~/fonts/iconic/iconic_stroke.svg#iconic") format('svg'), 
     url("~/fonts/iconic/iconic_stroke.otf") format('opentype');

，但我面臨的一個問題是，對於菜單項的背景是透明的，所以菜單項將不會清楚，因爲他們背後的文字將被顯示。所以我如何刪除菜單項透明度？

來源

2013-07-30 john G

在你的第二個定義中，對於'nav'，我猜「nav」是一個類？如果是這樣，你忘了一段時間;它應該是'.nav'。它看起來像一些背景漸變沒有被應用，因此，這可能是你的問題。 – theftprevention

那麼你有幾個問題在這裏，沒有小提琴我不能回答他們，但你的不透明問題很容易解決。

CSS

.menu ul { 
position: absolute; 
left: -9999px; 
list-style: none; 
opacity: 0; /* for a css drop down I would recommend using display none/block instead of opacity 0/1 */ 
transition: opacity 1s ease; 
} 



.menu li:hover ul { 
background: rgba(255,255,255,0.7); /* this is why your drop down is transparent, rgba <-- the a means alpha or transparency so change that to 1.0 */ 
border-radius: 0 0 6px 6px; 
box-shadow: inset 0px 2px 4px rgba(0,0,0,0.4); 
left: 5px; 
opacity: 1;

}

新建CSS

.menu ul { 
position: absolute; 
left: -9999px; 
list-style: none; 
display: none; 
transition: opacity 1s ease; 
} 



.menu li:hover ul { 
background: rgba(255,255,255,1.0); /* or background: rgb(255, 255, 255); */ 
border-radius: 0 0 6px 6px; 
box-shadow: inset 0px 2px 4px rgba(0,0,0,0.4); 
left: 5px; 
display: block;

}

我會讓你成爲一個小提琴給你看。

Before

After

來源

2013-09-12 17:44:09

嘿，我有這種情況下一個簡單的解決方案....

文件上傳控制的簡單設置寬度40％的自動「無文件Choosen」文本將得到消失

來源

2015-04-29 07:14:13 Dipesh

如何從我的CSS3菜單中刪除透明度

回答

相關問題