Question

我使用SaaS建立自己的网店。问题是我不知道任何代码。我希望我的菜单栏看起来更时尚。 SaaS平台提供CSS编辑，但我无法更改html。当前菜单栏有这个css;

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

我怎样才能让它看起来更好看。我尝试更改不透明度，但每次添加单词opacity时代码都会中断，memu会消失。

我目前的设计看起来像这样; http://imgur.com/a/ptSuA 我真的想让菜单栏不那么粗糙，让它看起来更友好。

对不起我的可怕语法和缺乏知识。

Answer 1

尝试使用 background-color:rgba()代替不透明度这会增加菜单栏的透明度。

例如

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

最后一个值增加了透明度。

Answer 2

当您向#menu添加不透明度时，它会影响所有儿童和菜单消失。您必须使用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);
}

基本的CSS不透明度

3 个答案: