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タグの特殊効果(ページ遷移効果)

推薦する

Nginx 経由で Tomcat9 クラスターを構築し、セッション共有を実現する

Nginx を使用して Tomcat9 クラスターを構築し、Redis を使用してセッション共有を実...

Vue は Tencent Map を統合して API を実装します (デモ付き)

目次執筆の背景プロジェクトの説明事前準備注記執筆の背景以前のプロジェクトではTencent Maps...

MySQLクエリ文の実行プロセスを理解するための記事

序文要件を満たす特定のデータをデータベースから取得する必要があります。Select ABC FROM...

Navicat For MySQL の使い方に関する簡単なチュートリアル

推薦する: Navicat for MySQL 15 登録とアクティベーションの詳細なチュートリアル...

VMware ESXi サーバー仮想化クラスター

目次まとめ環境とツールの準備サーバー仮想化のインストール VMware ESXi仮想マシンのオペレー...

Momentsで写真を整理するためのCSSコード

まず、Moments を開いて、写真の数が異なるいくつかのレイアウトを確認するか、以下の例を参照して...

jsを使用してスライダーをドラッグする効果を実現します

この記事では、jsでスライダーをドラッグする方法の具体的なコードを参考までに共有します。具体的な内容...

MySQL無料インストール版のパスワード設定に関する詳細なチュートリアル

方法1: SET PASSWORDコマンドを使用する MySQL -u ルート mysql> ...

Nodejs でタイムドクローラーを実装する完全な例

目次事件の原因Node Scheduleを使用してスケジュールされたタスクを実装する1. node-...

HTML テーブルタグチュートリアル (19): 行タグ

<TR> タグの属性は、次の表に示すように、テーブル内の各行のプロパティを設定するために...

Tomcat を IDEA にダウンロード、インストール、デプロイするチュートリアル (IDEA の 2 つのホット デプロイ設定方法付き)

目次Tomcat ダウンロードチュートリアルTomcat インストールチュートリアルTomcat の...

mysql init_connect に関するいくつかの重要なポイントの要約

init_connectの役割init_connect は通常、接続が来たときに、自動コミットを 0...

react-navigation6.xルーティングライブラリの基本的な使い方の詳しい説明

目次react-nativeプロジェクトの初期化react-nativeプロジェクトをインストールす...

自動同期テーブル構造のMySql開発

開発の問題点開発プロセスでは、データベース フィールドが頻繁に変更されるため、RD 環境と QA 環...

MySQL トリガーの使用シナリオとメソッドの例

トリガー:トリガーの使用シナリオと対応するバージョン:トリガーは次の MySQL バージョンで使用で...