背景色が透明で、文字が不透明です.

1720 ワード

背景色が透明で、文字が不透明です.
 
仕事の中でこのような問題に遭遇しました.
1、背景色が透明
2、透明な背景で文字が不透明
3、文字は水平中央にする
 
そのため、私は2つの解決策を提供しました.
 
1.HTML 5を用いた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は可視化領域が1行の2/12を占めることからbootstrapが計算したものである
2、div.bgitemは親divの100%を占めて5画素減少し、透明な色が設定されています.これが透明な背景です.
3、div.itemは文字を格納するために使用され、透明色(文字が不透明)を設定せず、position:absoluteスタイルを使用し、幅を100%に設定し、親divと同じ幅に設定し、水平中央、すなわちdiv.itemが親divと完全に一致します.