他們如何使用右側菜單上的不透明度？

http://pupunzi.com/ 他們如何使用不透明度的菜單&爲什麼文本可以改變不透明度而不改變菜單背景的不透明度？他們如何使用右側菜單上的不透明度？

2011-08-20 Taras Lukavyi

答案在你面前。只要看看源代碼。 –

我無法找到我在找什麼 –

以下是他們使用的風格，您可以看到rgba色空間，它接受紅色，綠色，藍色和alpha的參數，其中alpha是透明度通道。

#navigation #menu { 
    position: absolute; 
    top: 0; 
    left: 5px; 
    padding: 35px; 
/*padding-top: 50px;*/ 
    border-left: 1px solid rgba(255, 255, 255, 0.9); 

    background: rgba(255, 255, 255, 0.3); 

/* IE10 */ 
    background: -ms-radial-gradient(left top, circle farthest-corner, rgba(255, 255, 255, 0.9) 0%, rgba(38, 150, 165, 0.1) 75%); 
/* Mozilla Firefox */ 
    background: -moz-radial-gradient(left top, circle farthest-corner, rgba(255, 255, 255, 0.9) 0%, rgba(38, 150, 165, 0.1) 75%); 
/* Opera */ 
    background: -o-radial-gradient(left top, circle farthest-corner, rgba(255, 255, 255, 0.9) 0%, rgba(38, 150, 165, 0.1) 75%); 
/* Webkit (Safari/Chrome 10) */ 
    background: -webkit-gradient(radial, left top, 0, left top, 1017, color-stop(0, rgba(255, 255, 255, 0.9)), color-stop(.75, rgba(38, 150, 165, 0.1))); 
/* Webkit (Chrome 11+) */ 
    background: -webkit-radial-gradient(left top, circle farthest-corner, rgba(255, 255, 255, 0.9) 0%, rgba(38, 150, 165, 0.1) 75%); 
/* Proposed W3C Markup */ 
    background: radial-gradient(left top, circle farthest-corner, rgba(255, 255, 255, 0.9) 0%, rgba(38, 150, 165, 0.1) 75%); 

    width: 100%; 
    height: 100%; 
    -moz-box-shadow: -5px 1px 10px rgba(0, 0, 0, 0.4); 
    -o-box-shadow: -5px 1px 10px rgba(0, 0, 0, 0.4); 
    -webkit-box-shadow: -5px 1px 10px rgba(0, 0, 0, 0.4); 
    box-shadow: -5px 1px 10px rgba(0, 0, 0, 0.4);

}

來源

2011-08-20 17:58:44

謝謝。我認爲這就是它 –

基本上他們把圖像放在背景中，在它上面有一個透明的漸變'div'ision。最相關的部分是以'background'開頭的那些行。到目前爲止，我們需要指定不同的屬性來定位大多數瀏覽器，因爲您可以看到它們使用了多個'background'屬性。 –

這是第四分組rgba(255, 255, 255, x.x)您使用0.1 - 0.9爲你的規模。 0.1爲10％，0.5至50％等。

來源

2011-08-21 09:40:07 Shane

他們如何使用右側菜單上的不透明度？

回答

相關問題