日付ピッカーをカプセル化する場合、選択時にフォントの色を暗くする必要があります。実装後の効果を見てみましょう。 テキスト全体が暗くなっているのではなく、中央の領域が暗くなっていることがわかります。今日の議論の焦点はセレクターのカプセル化ではなく、主にスタイル効果にあります。このコンポーネントの実装のアイデアを理解したい場合は、以前の記事「日付ピッカーの実装のアイデア」を参照してください。 1.まず、 に入るとフォント全体ではなく、エリアの色が濃くなるため、選択範囲からテキストスタイルを変更して始めることはできません。 エリアを見ると、まずマスクを思い浮かべます。 2.ただし、マスクレイヤーを使用して中間色を明るくするのは簡単で、マスクレイヤー+透明度+配置を追加するだけです。 しかし、マスクレイヤーを追加して中間色を暗くするにはどうすればよいでしょうか。 選択した部分から色を暗くする効果を解くのに悩むと、深い考えに陥ってしまいます。 。 。 3.色を明るくするのは簡単なので、中央の選択部分を除くすべての部分にマスクレイヤーを追加して色を明るくし、選択部分は自然に暗くなるようにします。 4.上部と下部にマスク レイヤーを追加することを決定した後、検討すべき別の質問があります。マスク レイヤーを上部に追加した場合でも、 コード実装: //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 学習ノートボタンスタイル
1. MySQLデータベースのエンコーディングを確認する mysql -u ユーザー名 -p パスワ...
間違いNavicat Premium を使用して MySQL に接続すると、次のエラーが発生します。...
交差点セレクター交差セレクターは、直接接続された 2 つのセレクターで構成されます。最初のセレクター...
1. sql_modeを確認する @@sql_mode を選択照会された値は次のとおりです。 ON...
目次1. フィルターの概念1. グローバルフィルターのフォーマットをカスタマイズする2. フィルター...
この記事の例では、Vueドロップダウンメニューのコンポーネント開発の具体的なコードを参考までに共有し...
序文プロジェクトを開発しているときに、かなり厄介な問題に遭遇しました。この製品では、判断のためにブラ...
構造関連タグ--------------------------------------------...
目次1. 概要2. Nginxインストールパッケージをダウンロードする3. 依存パッケージをインスト...
オブジェクト上にマウスを移動したときにコンテンツ(タイトル属性の内容)を折り返す方法、HTML タイ...
今日、MySQL の新しいバージョン (8.0.21) をインストールしましたが、ノード フレームワ...
目次1. シナリオ2. 解決策3. 結論4. 参考文献1. シナリオ日常の開発およびテスト作業には ...
テーブルを美しくするために、行ごとに異なる境界線の色を設定できます。基本的な構文<TR 境界線...
なぜvimを学ぶのかLinuxには多数の設定ファイルがあるため、Linuxには多くのテキスト処理ツー...
TabIndex は、Tab キーを押して、定義された TabIndex 要素を順番に取得し、各要素...