CSS では、linear-gradient() 関数と rgba() 関数を使用して、画像の透明度のグラデーションを実現できます。構文は、「background-image:linear-gradient(to top,rgba(. .)、rgba(..) ))、url(..)」。
このチュートリアルの動作環境: Windows 7 システム、CSS3&&HTML5 バージョン、Dell G3 コンピューター。
css 背景画像の透明度グラデーションの設定
css では、linear-gradient() 関数と rgba() 関数を使用して、画像の透明度グラデーションを実現できます
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>图片透明度渐变实例演示</title>
<style>
.div1 {
box-sizing: border-box;
width: 400px;
height: 240px;
font-size: 22px;
padding-top: 100px;
overflow: hidden;
background: no-repeat center top / 100% 100%;
background-image: url(img/3.jpg)
}
.div2 {
box-sizing: border-box;
width: 400px;
height: 240px;
font-size: 22px;
padding-top: 100px;
overflow: hidden;
background: no-repeat center top / 100% 100%;
background-image: linear-gradient(to top, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0)), url(img/3.jpg)
}
</style>
</head>
<body>
<p>原图：</p>
<div class="div1"></div>
<p>透明度渐变：</p>
<div class="div2"></div>
</body>
</html>レンダリング:
(学習ビデオ共有: css ビデオ チュートリアル)
手順:
linear-gradient() 関数は、線形グラデーションの「イメージ」を作成するために使用されます。
線形グラデーションを作成するには、グラデーション効果の開始点と方向 (角度として指定) を設定する必要があります。終了色も定義する必要があります。ストップ カラーは、Gecko に実行させるスムーズなトランジションであり、少なくとも 2 つを指定する必要があります。ただし、より複雑なグラデーション効果を作成するには、より多くの色を指定できます。
css 構文:
background: linear-gradient(direction, color-stop1, color-stop2, ...);
direction 角度値を使用して、グラデーションの方向 (または角度) を指定します。
color-stop1、color-stop2、... グラデーションの開始色と終了色を指定するために使用されます。
#linear-gradient() 関数で rgba を使用して、透明度のグラデーションを設定します。
RGBA は (赤-緑-青-アルファ) を意味します。これは、色の値に透明度を設定する「アルファ」チャネルを含めるための RGB の拡張です。
構文:
rgba(red, green, blue, alpha)
red 赤の値を定義します。値の範囲は 0 ～ 255 で、パーセンテージ 0% ～ 100% も使用できます。
green 緑の値を定義します。値の範囲は 0 ～ 255 で、パーセンテージ 0% ～ 100% も使用できます。
blue 青色の値を定義します。値の範囲は 0 ～ 255 で、パーセンテージ 0% ～ 100% も使用できます。
アルファ - 透明度 透明度を定義します 0 (完全に透明) ~ 1 (完全に不透明)
プログラミング関連の知識の詳細については、以下を参照してください。 プログラミング入門! ！
以上がCSS背景画像に透明度のグラデーションを設定する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
2つの画像とAPI：製品のリクロッキングに必要なすべてApr 15, 2025 am 11:27 AM最近、製品画像の色を動的に更新するソリューションを見つけました。したがって、製品の1つだけで、私たちはそれをさまざまな方法で色付けすることができます
毎週のプラットフォームニュース：サードパーティのコード、パッシブ混合コンテンツ、最も遅い接続のある国の影響Apr 15, 2025 am 11:19 AM今週のラウンドアップでは、灯台はサードパーティのスクリプトに光を当て、安全なリソースが安全なサイトでブロックされ、多くの国の接続速度がブロックされます
独自の非JavaScriptベースの分析をホストするためのオプションApr 15, 2025 am 11:09 AMサイトの訪問者と使用データを追跡するのに役立つ分析プラットフォームがたくさんあります。おそらく、特にGoogleアナリティクスが広く使用されています
それはすべて頭の中にあります：Reactヘルメットを使用してReact Poweredサイトのドキュメントヘッドを管理するApr 15, 2025 am 11:01 AMドキュメントヘッドはウェブサイトの中で最も魅力的な部分ではないかもしれませんが、それに入るものは間違いなくあなたのウェブサイトの成功にとってそれと同じくらい重要です
JavaScriptのsuper（）とは何ですか？Apr 15, 2025 am 10:59 AM子のクラスでsuper（）？を呼び出すJavaScriptを見たときに何が起こっているのか、Super（）を使用して親のコンストラクターとSuperを呼び出します。そのアクセス
さまざまな種類のネイティブJavaScriptポップアップを比較しますApr 15, 2025 am 10:48 AMJavaScriptには、ユーザーインタラクション用の特別なUIを表示するさまざまな内蔵ポップアップAPIがあります。有名：
アクセス可能なWebサイトが構築が難しいのはなぜですか？Apr 15, 2025 am 10:45 AM先日、私は多くの企業がアクセス可能なウェブサイトを作るのに苦労している理由について、フロントエンドの人々とおしゃべりをしていました。アクセス可能なWebサイトがとても難しいのはなぜですか
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
AI Hentai Generator
AIヘンタイを無料で生成します。
人気の記事
ホットツール
SublimeText3 中国語版
中国語版、とても使いやすい
AtomエディタMac版ダウンロード
最も人気のあるオープンソースエディター
VSCode Windows 64 ビットのダウンロード
Microsoft によって発売された無料で強力な IDE エディター
ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境
DVWA
Damn Vulnerable Web App (DVWA) は、非常に脆弱な PHP/MySQL Web アプリケーションです。その主な目的は、セキュリティ専門家が法的環境でスキルとツールをテストするのに役立ち、Web 開発者が Web アプリケーションを保護するプロセスをより深く理解できるようにし、教師/生徒が教室環境で Web アプリケーションを教え/学習できるようにすることです。安全。 DVWA の目標は、シンプルでわかりやすいインターフェイスを通じて、さまざまな難易度で最も一般的な Web 脆弱性のいくつかを実践することです。このソフトウェアは、
