基本的なCSSの不透明度

Question

私は自分のwebshopを構築するためにSaaSを使用しています。問題は、私はどんなコードも知らないということです。メニューバーをよりスタイリッシュに見せたい。 SaaSプラットフォームはCSS編集を提供していますが、htmlを変更することはできません。 現在のメニューバーにこのCSSがあります。

#menu { 
    padding: 5px 0 5px 0; 
    background: #005775; 
    margin: 0 0 8px 0; 
} 

これをより適切に見えるようにするにはどうすればよいですか。私は不透明度を変更しようとしましたが、不透明度の単語を追加するたびにコードが壊れ、memuが消えます。

私の現在のデザインはこのようになります。 http://imgur.com/a/ptSuA メニューバーを少し粗くして見やすくしたいと思っています。

私のひどい文法と知識の不足のため申し訳ありません。

Answer 1

background-color:rgba()の代わりに、不透明度 を使用すると、メニューバーに透明度が追加されます。

例

background-color:rgba(255,0,0,0.5); 

最後の値は、透明度を追加します。あなたは#menuに不透明度を追加すると

Answer 2

、それはすべての彼の子供に影響を与えるとメニューがdisappears.youだからbackground-color:rgba()またはbackground-color:hsla()

#005775 = rgba(0, 87, 117, 1.0) 
#005775 = hsla(195, 100%, 23%, 1.0) 

で使用する必要があります。

#menu { 
 
    width: 200px; 
 
    height: 200px; 
 
    padding: 5px 0 5px 0; 
 
    margin: 0 0 8px 0; 
 
    background:rgba(0, 87, 117, 0.3);/*/ I use 0.3 /*/ 
 
}

<div id="menu">I Am Menu</div>

Answer 3

これを試してください。他の人によると、これはメニュー内のテキストの不透明度も低下させます。

#menu { 
    padding: 5px 0 5px 0; 
    background: #005775; 
    margin: 0 0 8px 0; 
    opacity: 0.5; // Change this value between 0(transparent) -> 1(100% visible); 
}