如何添加不透明度到CSS侧边栏(不是所有的元素)



我有这个网站,我想给侧边栏添加不透明度,但只有白色部分,其他元素不透明度为100%

http://eparquitectos.mx/

这是我的CSS

我试着添加

不透明度:0.4;在。sidebar中,但是所有的东西都有相同的不透明度,包括文本和徽标。

SIDEBAR
*************************************************************************/
.sidebar {
margin: 0;
position: fixed;
padding:50px 0 0 0;
width:220px;
height:100%;
left:50px;
top:0;
}
.sidebar.sidebar_absolute{
left:0;
position: absolute;
}
.sidebar.sidebar_absolute .inner_sidebar{
padding-bottom:67px;
}
.inner_sidebar{
width:220px;
float: left;
}
.fullwidth .sidebar{
display:none;
}
.border-transparent{
position: absolute;
width: 1px;
left: 0;
top: 0;
height: 100%;
}
.border-transparent-right{
left:auto;
right:0;
}
div .border-transparent-top{
height:1px;
width:100%;
}

#top .logo, .logo a{
display:block;
position:relative;
border: none;
padding: 0;
margin:0;
float:left;
text-align: center;
}
#top .logo a, #top .logo a:hover{
top:0;
left:0;
outline:none;
border: none;
}
#top .logo img{
border:none;
margin:0 auto;
max-width: 180px;
}
#top .bg-logo, #top .bg-logo a{
text-indent: -9999px;
height:85px;
width:180px;
}

/*menu*/
.main_menu, #top .main_menu .menu{
line-height:30px;
z-index:300;
clear:both;
width:100%;
position: relative;
}
.main_menu div{
position: relative;
width: 100%;
z-index:300;
}
.main_menu .menu, .main_menu .menu ul{
margin:0;
padding:0;
list-style-type:none;
list-style-position:outside;
position:relative;
line-height:50px; 
z-index:5;
}
#top .main_menu .menu a{
display:block;
line-height:18px;
outline:medium none;
padding:9px 0;
text-decoration:none;
z-index: 10;
position: relative;
width:100%;
z-index:5;
}
.main_menu .menu li a strong {
display:block;
font-size:14px;
font-weight:normal;
cursor: pointer;
text-transform: uppercase;
}
.main_menu .menu li a span {
display:block;
font-size:11px;
line-height:14px;
color:#999;
cursor: pointer;
position: relative;
}

谢谢你的时间。

查找rgba()属性。它允许您为具有透明度的背景指定一种颜色。

不透明度影响包括子元素在内的整个元素。我相信你要找的是rgba()

这是我从一本书中摘录的一段解释

Alpha通道(简称Alpha)是对颜色透明度的度量——与不透明度属性相反,它是对元素透明度的度量。因此,虽然使用Alpha的颜色值可以像任何其他颜色值一样被子元素继承,但元素的整体不透明度不会受到影响。CSS3在RGBA颜色模型中引入Alpha作为一个值。RGBA代表Red, Green, Blue, Alpha,语法与CSS2中使用的RGB值相同,但Alpha值在末尾由额外的逗号分隔参数指定:即{ color: rgba(red, green, blue, alpha); }

最新更新