スクロール時に選択領域のフォント色を暗くするために 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 コマンドライン操作中のエンコードの問題の詳細な説明

1. MySQLデータベースのエンコーディングを確認する mysql -u ユーザー名 -p パスワ...

NavicatがMySQL8.0.11に接続するとエラー2059が発生する

間違いNavicat Premium を使用して MySQL に接続すると、次のエラーが発生します。...

CSS 複合セレクタの具体的な使用法

交差点セレクター交差セレクターは、直接接続された 2 つのセレクターで構成されます。最初のセレクター...

MySql バージョンの問題に対する完璧なソリューション sql_mode=only_full_group_by

1. sql_modeを確認する @@sql_mode を選択照会された値は次のとおりです。 ON...

Vue グローバル フィルターの概念、注意事項、基本的な使用方法

目次1. フィルターの概念1. グローバルフィルターのフォーマットをカスタマイズする2. フィルター...

Vueドロップダウンメニューのコンポーネント開発の詳細説明

この記事の例では、Vueドロップダウンメニューのコンポーネント開発の具体的なコードを参考までに共有し...

文字列の GBK および GB2312 エンコードとデコードのフロントエンド実装 (概要)

序文プロジェクトを開発しているときに、かなり厄介な問題に遭遇しました。この製品では、判断のためにブラ...

WMLタグの概要

構造関連タグ--------------------------------------------...

CentOS7にNginxを素早くインストールする方法を教えます

目次1. 概要2. Nginxインストールパッケージをダウンロードする3. 依存パッケージをインスト...

html リンク タグ タイトル属性 改行 マウス ホバー プロンプト コンテンツ 改行効果

オブジェクト上にマウスを移動したときにコンテンツ(タイトル属性の内容)を折り返す方法、HTML タイ...

ノードをMySQLデータベースに接続する際に発生する問題と解決策

今日、MySQL の新しいバージョン (8.0.21) をインストールしましたが、ノード フレームワ...

ホストサービスにアクセスするDockerでのサービスの実装

目次1. シナリオ2. 解決策3. 結論4. 参考文献1. シナリオ日常の開発およびテスト作業には ...

HTML テーブルタグチュートリアル (21): 行の境界線の色属性 BORDERCOLOR

テーブルを美しくするために、行ごとに異なる境界線の色を設定できます。基本的な構文<TR 境界線...

一般的な Linux ツール vi/vim の完全版

なぜvimを学ぶのかLinuxには多数の設定ファイルがあるため、Linuxには多くのテキスト処理ツー...

Web デザイン TabIndex 要素

TabIndex は、Tab キーを押して、定義された TabIndex 要素を順番に取得し、各要素...