-moz-opacity

-moz-opacity

注意

Gecko系の独自拡張で、chrome用・CSS3の先行実装の実験用です(参照:Mozillaの独自拡張CSSは使わないでください)。

Mozilla 1.7からCSS3のopacityプロパティが実装され、-moz-opacityはopacityのエイリアスとなりました。

用語の簡単な解説

透明度を設定します。

3.2. Transparency: the 'opacity' property@CSS3 Color Moduleの先行実装と考えられます。

*1

指定

指定できる値は<alphavalue>|inheritです。


実行例

css

.mo_parent {padding:5px; background-color:#ffffff;
 width:300px; height:250px;}
.mo_child {margin:3px; float:left; color:#000000;
 border:1px solid #313131; width:90px; text-align:center;}
.mo    {border:0;}
#mo000 {-moz-opacity:0.00;}
#mo025 {-moz-opacity:0.25;}
#mo050 {-moz-opacity:0.50;}
#mo075 {-moz-opacity:0.75;}
#mo100 {-moz-opacity:1.00;}

html

<div class="mo_parent">
<div class="mo_child">
<img class="mo" id="mo000" alt="mo000"
 src="http://css.g.hatena.ne.jp/images/group/css/diary/smoking186/20040608.png">
mo000
</div>
<div class="mo_child">
<img class="mo" id="mo025" alt="mo025"
 src="http://css.g.hatena.ne.jp/images/group/css/diary/smoking186/20040608.png">
mo025
</div>
<div class="mo_child">
<img class="mo" id="mo050" alt="mo050"
 src="http://css.g.hatena.ne.jp/images/group/css/diary/smoking186/20040608.png">
mo050
</div>
<div class="mo_child">
<img class="mo" id="mo075" alt="mo075"
 src="http://css.g.hatena.ne.jp/images/group/css/diary/smoking186/20040608.png">
mo075
</div>
<div class="mo_child">
<img class="mo" id="mo100" alt="mo100"
 src="http://css.g.hatena.ne.jp/images/group/css/diary/smoking186/20040608.png">
mo100
</div>
</div>

表示例

0.00,0.25,0.50,0.75,1.00を指定した例

プロパティ一覧

*1:以前は百分率指定も出来ましたが2004/06現在百分率指定を無視する為、先行実装と考えて良いかと

Error : RSSが取得できませんでした。 Error : RSSが取得できませんでした。