背景色が透明で、文字が不透明です.
1720 ワード
背景色が透明で、文字が不透明です.
仕事の中でこのような問題に遭遇しました.
1、背景色が透明
2、透明な背景で文字が不透明
3、文字は水平中央にする
そのため、私は2つの解決策を提供しました.
1.HTML 5を用いたrgba()属性構成
原理説明:
1、div.demo背景色は黒透明
2、pタグの内容は水平中央であり、透明色は設定されていない
2、filter(フィルタ)とopacityスタイルを使って配置する
原理の説明
1、最外層のdivは可視化領域が1行の2/12を占めることからbootstrapが計算したものである
2、div.bgitemは親divの100%を占めて5画素減少し、透明な色が設定されています.これが透明な背景です.
3、div.itemは文字を格納するために使用され、透明色(文字が不透明)を設定せず、position:absoluteスタイルを使用し、幅を100%に設定し、親divと同じ幅に設定し、水平中央、すなわちdiv.itemが親divと完全に一致します.
仕事の中でこのような問題に遭遇しました.
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"> </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と完全に一致します.