CSSとHTMLで文字で背景の画像を抜く方法。

f:id:mikanusagi:20180513030741p:plain

こんにちは。先日作った「上に戻るボタン」に模様をつけたいmikanusagiです。

 f:id:mikanusagi:20180508001623p:plain◀コレを、、こうしたい▶  f:id:mikanusagi:20180515033344p:plain

 

それに先立って、いろいろ模索中です。(´_ゝ`)

 

今回は、CSSとHTMLで文字で背景の画像を抜く方法を試してみます。

f:id:mikanusagi:20180526044920p:plain ←こんな感じにしたい。

 

 

 

まず、文字と、Font Awesomeを使って、テストしてみます。 

今回はこちらのサイトを参考にさせて頂きました。

…参考にしていたページがなくなってしまいました。( ノД`)

 

そっそく。

テスト

 

透明にはなった(´_ゝ`)

 

「透明にはなった」がどういう意味かというと…

 

f:id:mikanusagi:20180526043006p:plainf:id:mikanusagi:20180526043016p:plain

実は、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; にしたら反映されました。

これについては…

ベンダープレフィックス-CSSの基本

ベンダープレフィックスというものが関係しているみたいです。

ということで、両方記載しておくことにしました。

 

また、textは、CSSによっては既に使われているかもしれないと思ったので、ここではtextAに変更しました。

 

 

 

 

結局今回は、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にいたっては、、

f:id:mikanusagi:20180526063609p:plain Font Awesomeもちゃんとできてる…!!!(*´Д`)

うまくいかないのはブラウザ用に何か必要ということなのかな…

もう少し調べてみます…

 

 

 

※この記事は2018年5月末のものです。 今後の仕様変更で、上記の通りの作動にはならなくなる可能性があります。