日付ピッカーをカプセル化する場合、選択時にフォントの色を暗くする必要があります。実装後の効果を見てみましょう。 テキスト全体が暗くなっているのではなく、中央の領域が暗くなっていることがわかります。今日の議論の焦点はセレクターのカプセル化ではなく、主にスタイル効果にあります。このコンポーネントの実装のアイデアを理解したい場合は、以前の記事「日付ピッカーの実装のアイデア」を参照してください。 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 学習ノートボタンスタイル
:= と = の違い=設定および更新の場合にのみ、:= と同じ効果、つまり代入効果があり、それ以外の...
目次JavaScriptでは、通常、次のコードのようにクラスを簡単に定義できます。 var サンプル...
このメモはインストール チュートリアルです。実用的な意味はありません。記録のためだけに書いています。...
国務院は本日、新型コロナウイルス感染症との闘いで殉教した方々と犠牲者に対し、全国各民族人民の深い哀悼...
目次1. 挿入2. 更新3. 削除1. 挿入 顧客に挿入( 顧客.顧客住所、 顧客.cust_cit...
序文この記事では、SQL インジェクションを回避するために pdo の前処理メソッドを使用します。詳...
Linux システムのネットワーク接続を構成するのは難しい場合があります。幸いなことに、多くの新しい...
背景データ ウェアハウス モデリングでは、何ら処理されていない元のビジネス レイヤー データは OD...
ウェブサイト機能を開発する場合、セッション キャッシュを時間内にクリアできません。一連の探索が始まり...
効果: タイトルには独自のシリアル番号があり、コードブロックには配色があり、コードブロックの左上隅に...
この記事では、例を使用して、MySQL データベースの基本的な知識と操作について説明します。ご参考ま...
おすすめの記事: CSS 疑似クラスの右下隅をクリックすると、選択を示すチェックマークが表示されます...
前回の記事で、mysqldump バックアップ ファイルに記録されるタイムスタンプ データは UTC...
この記事では、チェックボックスコンポーネントのカプセル化を実装するためのvue3.0の具体的なコード...
Baidu によって定義されているデッドリンク形式には 2 種類あります。 1: XML形式のデッド...