背景や透明文字が切れてしまう

Question

CSS を使用して、以下に示す 背景から透明なテキストを切り取る 効果を作成する方法はありますか?

画像がテキストの代わりになるため、貴重な SEO をすべて失うのは残念です。

最初に影を考えましたが、何も思いつきませんでした...

この画像はウェブサイトの背景であり、絶対に配置されています<img>tag

Answer 1

これは CSS で実現できますが、より良いアプローチは インライン SVG と SVG マスク を使用することです。このアプローチには、CSS に比べていくつかの利点があります。

• ブラウザのサポートの強化: IE10、Chrome、Firefox、safari...
スパイダーは SVG コンテンツをクロールできるため、これは SEO には影響しません (
• Google は 2010 年から SVG コンテンツにインデックスを付けています)

CodePen デモ:

SVG テキスト マスク

リーリー リーリー

テキストを選択可能および検索可能にすることが目的の場合は、テキストを

<defs> タグの外側に含める必要があります。次の例は、< > タグを使用して透明テキストを保持する 1 つの方法を示しています。

リーリー リーリー

Answer 2

CSS3 は実装できますが、すべてのブラウザがサポートしているわけではありません

背景クリップの場合: テキスト。テキストの背景を使用できますが、ページの背景と揃える必要があります

リーリー リーリー