CSSで透明な画像を作成することは簡単です。
CSSのopacityプロパティは、CSS3勧告の一部です。
例1 - 透明イメージの作成
透明性のためのCSS3プロパティがあるopacity 。
まず、CSSで透明なイメージを作成する方法を紹介します。
定期的なイメージ：
透明性と同じ画像：
次のCSSを見てください：
opacity 1.0 -プロパティは、0.0の値を取ることができます。 低い値、より透明。
IE8以前の使用filter:alpha(opacity=x) 低い値は、要素がより透明になり100 - xが0から値を取ることができます。
例2 - イメージの透明性 - ホバー効果
画像の上にマウス：
CSSは次のようになります。
例
img
{
opacity: 0.4;
filter: alpha(opacity=40); /* For IE8 and earlier */
}
img:hover
{
opacity: 1.0;
filter: alpha(opacity=100); /* For IE8 and earlier */
}
»それを自分で試してみてください 最初のCSSブロックはまた、実施例1のコードに似ている、私たちは、ユーザーが画像の一つの上に置いたときにどうするか追加されました。 このケースでは、ユーザーがそれの上に置いたときにイメージが透明でなくしたいです。 このためのCSSは、 opacity:1;
マウスポインタが画像から離れて移動すると、画像は再び透明になります。
例3 - 透明ボックス内のテキスト
これは、透明なボックス内に配置され、いくつかのテキストです。
ソースコードは次のようになります。
例
<html>
<head>
<style>
div.background
{
background: url(/css/klematis.jpg) repeat;
border: 2px solid black;
}
div.transbox
{
margin: 30px;
background-color: #ffffff;
border: 1px solid black;
opacity: 0.6;
filter: alpha(opacity=60); /* For IE8 and earlier */
}
div.transbox p
{
margin: 5%;
font-weight: bold;
color: #000000;
}
</style>
</head>
<body>
<div class="background">
<div class="transbox">
<p>This is some text that is placed in the transparent box.</p>
</div>
</div>
</body>
</html>
»それを自分で試してみてください まず、作成し<div>要素(class="background")の背景画像と、そして国境を。 その後、我々は別の作成<div> (class="transbox")最初の内側<div> 。 <div class="transbox">背景色、および境界線を持っている- div要素が透明です。 透明の内側<div>我々は内部のいくつかのテキストを追加<p>要素を。