◀コレを、、こうしたい▶ 
今回は、CSSとHTMLで文字で背景の画像を抜く方法を試してみます。
←こんな感じにしたい。
まず、文字と、Font Awesomeを使って、テストしてみます。
今回はこちらのサイトを参考にさせて頂きました。
…参考にしていたページがなくなってしまいました。( ﾉД`)
そっそく。
テスト
透明にはなった(´_ゝ｀)
「透明にはなった」がどういう意味かというと…
実は、Font Awesomeの画像を入力しているのですが、まるごと透明に抜けちゃってますね。
背景を設定していたのですが、反映されませんでした。
テキストの方はうまくできたようです °˖✧(*'▽')
さて、実際のタグですが…
今回は、上記サイトからほぼほぼ引用させて頂きましたが、少しだけ変えました。
CSSは…
#textA {
font-family: Meiryo, sans-serif;
line-height: 1.1;
font-size: 4.5em;
font-weight: bold;
color: rgba(0,0,0,0);
background-image: url(背景のURL); /*背景の画像のURL*/
background-clip: text;
-webkit-background-clip:text; /*Chrome, Safari用*/
}
HTMLは…
<span id="textA"> ここに文字 </span>
私の画面では、-webkit-background-clip: text;では画像が反映されなかったので、
background-clip: text; にしたら反映されました。
これについては…
ベンダープレフィックスというものが関係しているみたいです。
ということで、両方記載しておくことにしました。
また、textは、CSSによっては既に使われているかもしれないと思ったので、ここではtextＡに変更しました。
結局今回は、Font Awesomeの方はうまくいきませんでしたが、( ﾉД`) できそうなのに…ｼｸｼｸ…
とりあえず、文字で背景の画像を抜くという目的は達成したので、今回はこのへんで。
(*'▽')/
追記：動作確認
background-clip: text;
-webkit-backgroun-clip:text;
この段階で、Edge, Safari, Chrome, Firefoxでは反映されていることが確認できました。
IE 11は、うまく反映されていませんでした。
IEの方もいらっしゃいますよね。。ごめんなさい。
-ms-はもう使えないみたいだし…どうしたらいいのかな…( ;∀;)
Can I use というサイトを見る限りは、IE11も含め、ある程度はカバーしていそうではあったんですけど…(´；ω；`)
他にも反映されないブラウザがあるかもしれません…
参考：Can I use... Support tables for HTML5, CSS3, etc
それにしても、Firefoxにいたっては、、
Font Awesomeもちゃんとできてる…！！！(*´Д｀)
うまくいかないのはブラウザ用に何か必要ということなのかな…
もう少し調べてみます…
※この記事は2018年5月末のものです。 今後の仕様変更で、上記の通りの作動にはならなくなる可能性があります。
