ホームページ > ウェブフロントエンド > CSSチュートリアル > CSSで背景の透明度を下げる方法

CSSで背景の透明度を下げる方法

青灯夜游
リリース: 2022-01-20 13:47:16
オリジナル
5951 人が閲覧しました

背景の透明度を下げる Css メソッド: 1. opacity 属性を使用し、「opacity:transparency value;」スタイルを背景要素に設定するだけです; 2. filter 属性を使用して、「filter」スタイルを設定するだけです。背景要素: opacity (透明度の値);" スタイルに。

CSSで背景の透明度を下げる方法

このチュートリアルの動作環境: Windows 7 システム、CSS3&HTML5 バージョン、Dell G3 コンピューター。

css 背景の透明度を下げる

方法 1: 不透明度属性を使用します

不透明度属性を使用して、 1 つの要素の透明度レベルを設定します。 0.0 (完全に透明) から 1.0 (完全に不透明)

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style type="text/css">
#box{
width: 300px;
height: 300px;
background-color: red;
opacity: 0.4;
}
</style>
</head>
<body>
<div id="box"></div>
</body>
</html>
ログイン後にコピー

CSSで背景の透明度を下げる方法

方法 2: フィルター属性を使用する

フィルター属性要素の視覚効果 (ぼかしや彩度など) が定義されます。

opacity(%) は画像の透明度を変換できます。値は変換のスケールを定義します。値 0% は完全な透明度を意味し、値 100% は画像に変化がないことを意味します。 0% から 100% までの値はエフェクトの線形乗数であり、画像サンプルの数を乗算するのと同じです。値が設定されていない場合、値はデフォルトの 1 になります。この関数は既存の不透明度属性と非常に似ていますが、一部のブラウザではフィルターを通じてパフォーマンスを向上させるハードウェア アクセラレーションが提供される点が異なります。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style type="text/css">
#box{
width: 300px;
height: 300px;
background-color: red;
filter: opacity(0.3);
}
</style>
</head>
<body>
<div id="box"></div>
</body>
</html>
ログイン後にコピー

CSSで背景の透明度を下げる方法

(学習ビデオ共有: css ビデオ チュートリアル

以上がCSSで背景の透明度を下げる方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル:
css
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート