ホームページ >ウェブフロントエンド >フロントエンドQ&A >HTML画像の透明度を設定する方法
html 画像画像の透明度を設定する方法: 1. 画像画像に「opacity:value;」スタイルを設定し、値は 0.0 (完全に透明) から 1.0 (完全に不透明) の間です。 . img画像を与える 「filter:opacity(%);」スタイルを設定します。
このチュートリアルの動作環境: Windows7 システム、HTML5&&CSS3 バージョン、Dell G3 コンピューター。
html img 画像の透明度の設定
方法 1: 不透明度を使用して画像の透明度を設定します
Opacity プロパティは、要素の透明度レベルを設定します。
構文:
opacity: value;
属性値:
値: 不透明度を指定します。 0.0 (完全に透明) から 1.0 (完全に不透明)
例:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
.img2{
opacity: 0.5;
}
</style>
</head>
<body>
<div>
<p>原图：</p>
<img src="demo/img/5.jpg" style="max-width:90%"/ alt="HTML画像の透明度を設定する方法" >
</div>
<div>
<p>设置透明度的图：</p>
<img class="img2" src="demo/img/5.jpg" style="max-width:90%"/ alt="HTML画像の透明度を設定する方法" >
</div>
</body>
</html>レンダリング:
CSS ビデオ チュートリアル 、「html ビデオ チュートリアル 」]
方法 2: filter:opacity( % を使用する) )
filter 属性は、要素 (通常は<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
.img2{
-webkit-filter: opacity(100%); /* Chrome, Safari, Opera */
filter: opacity(20%);
}
</style>
</head>
<body>
<div>
<p>原图：</p>
<img src="demo/img/5.jpg" style="max-width:90%"/ alt="HTML画像の透明度を設定する方法" >
</div>
<div>
<p>设置透明度的图：</p>
<img class="img2" src="demo/img/5.jpg" style="max-width:90%"/ alt="HTML画像の透明度を設定する方法" >
</div>
</body>
</html>レンダリング:
##プログラミング関連の知識の詳細については、次を参照してください:
以上がHTML画像の透明度を設定する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。