CSS で透明なグラデーション効果を実装するためのサンプルコード

CSS で透明なグラデーション効果を実装するためのサンプルコード

Zhihu Discovery コラムのタイトル画像は、通常、以下のように表示されます。明らかに、グラデーションを使用して実現されています。このアイデアは非常に興味深いもので、主に認知の 2 つの側面があるという点が挙げられます。

この画像は実際には 2 つの部分に分けられます。右側はグラフィックとグラデーションを制御し、左側はグラデーションとは関係のない単色の背景です。

透明も色であり、グラデーションとして設定できます

参考までに、私自身のコードを以下に掲載します。

レイアウト

<本文>
    <div class="bg-gradient">
        <div class="pic"></div> 
    </div>
</本文>

CSS スタイル

<スタイル>
        .bgグラデーション{
            マージン: 0 自動;
            背景: rgb(244, 195, 77);
            位置: 相対的;
            幅: 600ピクセル;
            高さ: 350ピクセル;
        }

        .bg-グラデーション .pic{
            背景画像: linear-gradient(右へ、rgb(244, 195, 77)、透明)、url("bg.jpg");
            背景の位置: 中央;
            背景ブレンドモード: 通常;
            位置: 絶対;
            高さ: 100%;
            幅: 250ピクセル;
            右: 0;
        }
</スタイル>

最終的な効果は次のようになります

上記は私のコードです。ご覧いただきありがとうございます。

追伸: そこに何かを書き込んで何かがうまくいかなかったとしても、それは問題ではないと思います。まあ、それはあなたの問題です。よく聞いてください、自分で解決しなければなりません。 (露骨な言葉)

<<:  Vueでjsonpを使用する方法

>>:  見落とされがちなMETAタグの特殊効果(ページ遷移効果)

推薦する

js は複数の画像を zip にパッケージ化します

目次1. ファイルをインポートする2. HTMLページ3. メインコード4. 画像をbase64に変...

MySQL コピーテーブルと許可分析の 3 つの実装方法

テーブルを素早くコピーする方法まず、テーブル db1.t を作成し、1000 行のデータを挿入します...

myBatis で条件を削除する際のスプライシング問題を解決する

私は今日、mybatis を学び、データベースに対していくつかの簡単な追加、削除、変更、クエリを実行...

MySQLの使い方の詳細な説明

目次1. はじめに2. 本文2.1 Where句の位置2.2 演算子2.3 NULL値1. はじめに...

Dockerにおけるオーバーレイネットワークの詳細な説明

Docker 公式ドキュメントからの翻訳、原文: https://docs.docker.com/n...

背景属性の8つの属性値の詳細解説(面接の質問)

CSSの背景プロパティの値背景色背景画像背景繰り返し背景位置背景添付複合プロパティ: 背景: ba...

ドッカー専用倉庫港湾建設プロセス

1. 準備1.1 港ダウンロードハーバーダウンロードアドレス:リンクリンクの説明を追加し、必要なバー...

HTML テーブル マークアップ チュートリアル (41): テーブル ヘッダーの幅と高さの属性 WIDTH、HEIGHT

デフォルトでは、ヘッダーの幅と高さはコンテンツに応じて自動的に調整されます。ヘッダーの幅と高さを手動...

Dockerコンテナのログ処理の詳細な説明

Docker には多くのログ プラグインがあります。デフォルトでは json-file を使用します...

アニメーションとトランジションの違い

CSS3アニメーションとJSアニメーションの違いJSはフレームアニメーションを実装しますCSS3はト...

MySQLパーティションテーブルは月別に分類されています

目次テーブルを作成するデータベース ファイルを表示します。入れるクエリ消去補足:Mysqlは月テーブ...

Dell R720 サーバーに Windows Server 2008 R2 をインストールする方法

注: この記事のすべての写真はインターネットから収集されたものであるため、DELL R720 サーバ...

Linux システム修復モード (シングル ユーザー モード)

目次序文1. シングルユーザーモードでの一般的なバグ修正2. シングルユーザーモードでシステムパスワ...

JavaScript フロントエンドのタイムアウト非同期操作に最適なソリューション

目次コードの実行に長い時間がかかる場合はどうなりますか? Axiosにはタイムアウト処理機能が搭載さ...

MySQL 8.0.15 winx64 圧縮パッケージのインストールと設定方法のグラフィックチュートリアル

この記事では、MySQL 8.0.15 winx64 圧縮パッケージのインストールと設定方法を参考ま...