透明なテキストクリッピングから絵文字を除外します

このCSSトリックは、線形勾配の背景を適用し、テキストにクリップし、テキストを透明にすることにより、リンクにきちんとしたホバー効果を作成します。しかし、これは予想外に絵文字に影響を与え、同様に透明にします。これは技術的には正しいですが（絵文字はグリフです）、必ずしも望ましいとは限りません。

この記事では、ソリューションを探ります。 CSS font-variation-emojiおよびfont-paletteプロパティは、CSSフォントモジュールレベル4で提案されていますが、現在、この特定の問題には適していません。純粋なCSSソリューションは利用できないようです。

著者は2つの回避策を提案します。

1. JavaScript： WordPressやTwitterなどの大規模なプラットフォームは、画像ベースの絵文字（多くの場合SVG）を使用します。テキストベースの絵文字を画像に置き換えると、透明度効果が妨げられます。これには、絵文字を検出および置き換えるためのカスタムJavaScriptが必要です。

2. ポジショニング：最も簡単な解決策は、絵文字を外に置くことです<a></a>リンクタグ。これにより、CSSが影響を与えることができなくなります。ただし、これは、絵文字がリンクテキストの最初または終了時に一貫して配置されている場合にのみ実用的です。ミッドリンク絵文字は挑戦を提示します。

この記事では、単純なCSSソリューションは不足していますが、このようなシナリオでの絵文字スタイリングを制御する必要性は、将来のCSS開発の潜在的な領域を強調していると結論付けています。以下の画像は問題を示しています。

以上が透明なテキストクリッピングから絵文字を除外しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。