1. Home
  2. CSSの画像透明/不透明

CSSの画像透明/不透明2024 年の最新の入門チュートリアル。このコースでは より多くの例,例1 - 透明なイメージを作成します。,例2 - イメージの透明性 - 効果を合わせます,例3 - 透明なボックスのテキスト, について学習できます。

CSSの画像透明/不透明

CSSを使用すると、透明な画像を簡単に作成できます。

注：CSS Opacityプロパティは、W3C CSS3勧告の一部です。

例

より多くの例

透明画像を作成-効果を合わせます

テキストボックスを作成すると、透明な背景イメージを持っています

例1 - 透明なイメージを作成します。

CSS3プロパティで透明性が不透明です。

まず、我々はCSSで透明なイメージを作成する方法を紹介します。

正像

klematis

透明性と同じ画像：

klematis

次のCSSを考えてみます。

img
{
opacity:0.4;
filter:alpha(opacity=40); /* For IE8 and earlier */
}

IE9、Firefoxの、クローム、オペラ、およびSafariブラウザは、画像の透明性が不透明になることが使用しています。 1.0から0.0からOpacityプロパティの値。 値が小さいほど要素がより透明にします。

アルファ（不透明度= X）：IE8およびそれ以前のバージョンでは、フィルタを使用しています。 100 - Xは、0からの値を取ることができます。 低い値は、要素がより透明にします。

例2 - イメージの透明性 - 効果を合わせます

画像の上にマウスを移動します。

klematisklematis

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 */
}

第一のブロックは実施例1のCSSコード、等です。 また、我々はまた、ユーザが画像の一つの上にマウスホバーを移動したときに何が起こるかを追加しました。 この場合、ユーザが画像の上にマウスを移動したとき、我々は画像がクリアであることを願っています。

不透明度=1：これはCSSです。

IE8以前の使用：フィルタ：アルファ（不透明度= 100 ）。

マウスをイメージから離れポインタと、画像が再透明になります。

例3 - 透明なボックスのテキスト

透明ボックス内のテキスト。 透明ボックス内のテキスト。 透明ボックス内のテキスト。 透明ボックス内のテキスト。 透明ボックス内のテキスト。 透明ボックス内のテキスト。 透明ボックス内のテキスト。 透明ボックス内のテキスト。 透明ボックス内のテキスト。 透明ボックス内のテキスト。 透明ボックス内のテキスト。 透明ボックス内のテキスト。 透明ボックス内のテキスト。

次のようにソースコードは次のとおりです。

<html>
<head>
<style>
div.background
{
width:500px;
height:250px;
background:url(klematis.jpg) repeat;
border:2px solid black;
}
div.transbox
{
width:400px;
height:180px;
margin:30px 50px;
background-color:#ffffff;
border:1px solid black;
opacity:0.6;
filter:alpha(opacity=60); /* For IE8 and earlier */
}
div.transbox p
{
margin:30px 40px;
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.
This is some text that is placed in the transparent box.
This is some text that is placed in the transparent box.
This is some text that is placed in the transparent box.
This is some text that is placed in the transparent box.
</p>
</div>
</div>

</body>
</html>

まず、背景画像との境界線を持つdiv要素の固定の高さと幅を作成します。 その後、我々は最初のdiv内部の小さいdiv要素を作成します。 これは、固定幅、背景色、境界線を持つDIV - そしてそれは透明です。 透明divの内部では、我々はP要素内にいくつかのテキストを追加します。

ホットチュートリアル

お問い合わせ

CSSの画像透明/不透明
10/30