スクロール時に選択領域のフォント色を暗くするために CSS を使用するサンプルコード

スクロール時に選択領域のフォント色を暗くするために CSS を使用するサンプルコード

日付ピッカーをカプセル化する場合、選択時にフォントの色を暗くする必要があります。実装後の効果を見てみましょう。

ここに画像の説明を挿入

テキスト全体が暗くなっているのではなく、中央の領域が暗くなっていることがわかります。今日の議論の焦点はセレクターのカプセル化ではなく、主にスタイル効果にあります。このコンポーネントの実装のアイデアを理解したい場合は、以前の記事「日付ピッカーの実装のアイデア」を参照してください。

1.まず、 に入るとフォント全体ではなく、エリアの色が濃くなるため、選択範囲からテキストスタイルを変更して始めることはできません。 エリアを見ると、まずマスクを思い浮かべます。

2.ただし、マスクレイヤーを使用して中間色を明るくするのは簡単でマスクレイヤー+透明度+配置を追加するだけです。 しかし、マスクレイヤーを追加して中間色を暗くするにはどうすればよいでしょか。 選択した部分から色を暗くする効果を解くのに悩むと、深い考えに陥ってしまいます。 。 。

3.色を明るくするのは簡単なので、中央の選択部分を除くすべての部分にマスクレイヤーを追加して色を明るくし、選択部分は自然に暗くなるようにします。

4.上部と下部にマスク レイヤーを追加することを決定した後、検討すべき別の質問があります。マスク レイヤーを上部に追加した場合でも、 touchmoveスクロールをトリガーできますか?ここで、 sticky配置について考えます。まず、 stickyフロー ドキュメントから外れないので、 touchmoveのトリガーは引き続きこのボックス内でトリガーされます。

コード実装:

//HTML 構造 <body>
    <div class="box">
        <p class="top"></p>
        <p class="one">123123</p>
           .....ここでは多くの<p class="one">123123</p>が省略されています
        <p class="bottom"></p>
    </div>
</本文>
//スタイル <スタイル>
    。箱{
        上マージン: 100px;
        高さ: 420px;
        幅: 300ピクセル;
        位置: 相対的;
        背景色: fff;
        オーバーフロー:自動;
        境界線: インディゴ 1px 実線;
    }
    p{
        マージン:0;
        高さ: 20px;
        テキスト配置: 中央;
    }
 // ブロックされたテキストの色を明るくするために、白い背景と透明度のマスクレイヤーを追加します。top{ 
        高さ: 200px;
        背景色: #fff;
        position: sticky; //******* キーコード top: 0; //******* キーコード opacity: .4; //******* キーコード}
    。底{
        高さ: 200px;
        背景色: #fff;
        位置: 固定;
        下部: 0;
        不透明度: .4;
    }
</スタイル>

結果:

ここに画像の説明を挿入

スクロール時に選択領域のフォント色を暗くするCSSを実装するサンプルコードに関するこの記事はこれで終わりです。選択領域のフォント色を暗くするCSSに関するより関連性の高いコンテンツについては、123WORDPRESS.COMの過去の記事を検索するか、以下の関連記事を引き続き閲覧してください。今後とも123WORDPRESS.COMをよろしくお願いいたします。

<<:  メッセージ ボタンに数量バッジを追加する HTML コード

>>:  Bootstrap 3.0 学習ノートボタンスタイル

推薦する

MySQL における := と = の違いをグラフィカルに紹介

:= と = の違い=設定および更新の場合にのみ、:= と同じ効果、つまり代入効果があり、それ以外の...

JavaScript インスタンス オブジェクトでプロトタイプ メソッドをオーバーライドする方法の詳細

目次JavaScriptでは、通常、次のコードのようにクラスを簡単に定義できます。 var サンプル...

VMware Workstation 15 Pro に Ubuntu 1804 をインストールするチュートリアル (画像とテキスト付き)

このメモはインストール チュートリアルです。実用的な意味はありません。記録のためだけに書いています。...

サイト全体を灰色にするCSSコードのまとめ

国務院は本日、新型コロナウイルス感染症との闘いで殉教した方々と犠牲者に対し、全国各民族人民の深い哀悼...

MySQLデータの挿入、更新、削除の詳細

目次1. 挿入2. 更新3. 削除1. 挿入 顧客に挿入( 顧客.顧客住所、 顧客.cust_cit...

PDO を使用して SQL インジェクションを防ぐ原理の分析

序文この記事では、SQL インジェクションを回避するために pdo の前処理メソッドを使用します。詳...

Linuxで静的ネットワーク接続を構成する方法

Linux システムのネットワーク接続を構成するのは難しい場合があります。幸いなことに、多くの新しい...

Meituan DBデータをデータウェアハウスに同期するアーキテクチャと実践

背景データ ウェアハウス モデリングでは、何ら処理されていない元のビジネス レイヤー データは OD...

UrlRewriter のキャッシュ問題と関連する一連の調査

ウェブサイト機能を開発する場合、セッション キャッシュを時間内にクリアできません。一連の探索が始まり...

Typora コードブロックのカラーマッチングとタイトルシリアル番号実装コード

効果: タイトルには独自のシリアル番号があり、コードブロックには配色があり、コードブロックの左上隅に...

MySQLデータベースの基礎知識と操作のまとめ

この記事では、例を使用して、MySQL データベースの基本的な知識と操作について説明します。ご参考ま...

製品を選択した後、右下隅に√記号を表示するための純粋なCSS

おすすめの記事: CSS 疑似クラスの右下隅をクリックすると、選択を示すチェックマークが表示されます...

知らないかもしれないmysqldumpパラメータ

前回の記事で、mysqldump バックアップ ファイルに記録されるタイムスタンプ データは UTC...

Vue3.0はチェックボックスコンポーネントのカプセル化を実装します

この記事では、チェックボックスコンポーネントのカプセル化を実装するためのvue3.0の具体的なコード...

Baidu デッドリンクファイルを作成する方法

Baidu によって定義されているデッドリンク形式には 2 種類あります。 1: XML形式のデッド...