背景色透明，文字不透明

背景色透明，文字不透明

 

在工作中遇到这么一个问题：

1、背景色透明

2、在透明背景中文字是不透明的

3、文字要水平居中

 

为此，我给出了两种解决办法

 

1、使用HTML5的 rgba() 属性配置

<style>
.demo{
  padding: 25px;
  background-color:#000000;
  background-color:rgba(0,0,0,0.4); 
}
.demo p{
	color: #FFFFFF;
}
</style>

<div class="demo">
	<p style="text-align:center;">背景透明，文字也透明</p>
</div>

 

原理说明：

1、div.demo背景色是黑色透明的

2、p标签的内容是水平居中，并且没有设置透明色

 

2、使用filter（滤镜）和 opacity 样式来配置

<style>
.nav_menu div.bgitem{
	filter: alpha(opacity=60);
	-moz-opacity: 0.6;
	-khtml-opacity: 0.6;
	opacity: 0.6;
	padding-top: 6px;
	padding-bottom: 6px;
	border: 1px solid #000000;
	color: #000000;
	background: #ffffff;
	cursor: pointer;
}

.nav_menu div.item{
	padding-top: 6px;
	padding-bottom: 6px;
	color: #000000;
	cursor: pointer;
	width: 100%;
	position: absolute;
	top:1px;
	left: -2px
}
</style>
<div class="active col-xs-2 text-center clear_padding relative">
	<div class="bgitem margin_right_5">&nbsp;</div>
	<div class="item" style="">全部</div>
</div>

 

原理说明

1、最外层的div根据可视化区域占一行的2/12，是bootstrap计算出来的 

2、div.bgitem 则是占据父div的百分之百减少5个像素，并且设置了透明的颜色，这就是透明背景

3、div.item 则是用来存放文字，没有设置透明色（文字不透明），使用position:absolute样式，宽度设置为100%，与父div一样宽，然后水平居中，即div.item与父div完全重合。