Css不透明属性
问题描述:
我有一个问题。下面是例子:Css不透明属性
nav {
width: 100%;
background: #000;
opacity: 0.8;
}
ul {
background: green;
opacity: 1;
}
<nav>
<ul>
<li>Link1</li>
<li>Link2</li>
</ul>
</nav>
<header>
<h1>123</h1>
</header>
而问题是,ul
也有opacity
。所有这一切我的意思是nav
标签是好的,它具有0.8的不透明度,但我的ul
标签不应该有不透明性,并且它不会在浏览器中查看CSS,但我仍然可以在ul
之后看到h1
文本,以及li
标签。
答
nav {
width: 100%;
//background: #000;
//opacity: 0.8;
background-color: rgba(0, 0, 0, 0.8);
}
ul {
background: green;
//opacity: 1;
}
<nav>
<ul>
<li>Link1</li>
<li>Link2</li>
</ul>
</nav>
<header>
<h1>123</h1>
</header>
如何使用rgba()
?
答
您需要使用rgba()
,其中4个参数需要0.0
为完全透明达1.0完全不透明,而前三个参数采用red
,blue
,您要使用的颜色值。
nav {
width: 100%;
background: rgba(0, 0, 0, 0.8);
}
ul {
background: green;
opacity: 1;
}
<nav>
<ul>
<li>Link1</li>
<li>Link2</li>
</ul>
</nav>
<header>
<h1>123</h1>
</header>
谢谢,它的工作! – Genjik
@Genjik我想你忘了接受答案。 – zynkn