基本的CSS不透明

-3

我使用SaaS來建立自己的網上商店。問題是我不知道任何代碼。我希望讓菜單欄看起來更時尚。 SaaS平臺提供CSS編輯，但我無法更改HTML。當前菜單欄有這個CSS;基本的CSS不透明

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

我該如何使這個更好看。我試着改變不透明度，但每次我添加不透明度的話代碼就會中斷，並且memu消失。

我目前的設計看起來像這樣; http://imgur.com/a/ptSuA 我真的想讓菜單欄稍微粗糙一點，讓它看起來更友好。

對不起我的可怕的語法和缺乏知識。

來源

2017-06-06 StartingNoob

你能證明你試過了嗎？ –

「更好看」是什麼意思？而且，我們只能看到一些代碼，而不是視覺演示，所以我們無法給出任何有關如何使其「更好看」的任何事情。 – Swellar

不知道什麼構成「更好看」，我覺得很難提供建議。沒有味道的會計！ –

嘗試使用 background-color:rgba()而不是不透明這增加了菜單欄的透明度。

例如

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

的最後一個值增加透明度。

來源

2017-06-06 10:32:42

當您添加不透明度#menu，它在所有他的兒童影響和菜單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>

來源

2017-06-06 10:32:56 Ehsan

非常感謝您的評論和時間。代碼有效，但它不能提供我想要的效果。對不起，我想我不擅長解釋我想要的東西。「這真是太神奇了，很多人都在努力幫助。」我上傳了一張我的網站的照片，所以你可以看到它，菜單欄看起來非常粗糙和不友好，這就是爲什麼我想讓它更柔和。 http://imgur.com/a/ptSuA「 – StartingNoob

如果對你有幫助請稍微補充一點 – Ehsan

試試這個。正如其他人所說，這也將減少菜單中文字的不透明度。

#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); 
}

來源

2017-06-06 11:35:34

基本的CSS不透明

回答

相關問題