ホームページ >ウェブフロントエンド >htmlチュートリアル >css_html/css_WEB-ITnose のテキストに 2 つのカラー コードを実装する方法の例
css_html/css_WEB-ITnose のテキストに 2 つのカラー コードを実装する方法の例
- WBOYオリジナル
- 2016-06-24 11:26:582313ブラウズ
2 つのカラー コードを使用してテキストを実装する方法の CSS 例:
実際のアプリケーションでは、テキスト効果をよりクールに設定する必要がある場合があります。
効果の 1 つは、テキストを 2 色に設定することですが、これは通常の方法では絶対に実現できません。
この関数を実装するコードの例を共有しましょう:
<!DOCTYPE html><html><head><meta charset="utf-8"><meta name="author" content="http://www.softwhy.com/" /><title>蚂蚁部落</title><style>.antzone{ display:inline-block; font-size:80px; line-height:80px; color:#000; position:relative; overflow:hidden; white-space:pre;}.antzone:before{ position:absolute; left:0; top:0; color:#f00; display:block; width:30%; content:attr(data-content); overflow:hidden;}</style></head><body><span class="antzone" data-content="蚂">蚂</span><span class="antzone" data-content="蚁">蚁</span><span class="antzone" data-content="部">部</span><span class="antzone" data-content="部">部</span></body></html> 上記のコードは、その実装プロセスを簡単に紹介します。
1. 実装原理:
原理は非常に単純で、:before 擬似オブジェクトセレクターを介して擬似要素をspan要素に追加することです。
元のspan要素のコンテンツをカバーできるように、この疑似要素を絶対配置に設定します。
次に、これに元のspan要素と同じテキストコンテンツを与え、色を設定します。最後に、擬似要素の幅を制御してテキストの色の範囲を設定します。
2. 関連資料:
(1).:before、CSS 疑似オブジェクト セレクターの before/E::before の章を参照してください。
(2). 相対配置と絶対配置については、CSS における絶対配置と相対配置の違いの章を参照してください。
(3).attr() は CSS 関数値 attr() の章を参照できます。
(4).content は CSS コンテンツ属性の章を参照できます。
元のアドレスは次のとおりです: http://www.softwhy.com/forum.php?mod=viewthread&tid=18241
詳細については、以下を参照してください: http://www.softwhy.com/divcss/