Blog

2022年9月29日

background-clip:text 背景画像をテキストで切り抜く（ちゃんと勉強する）

なんとなく今までふわっと使ってきたのですが、クリップ系のものを本格的に使っていくにあたって、それぞれの特徴をよく知っていかないといけないなと思いました。

元ネタはこちら
https://webdesignfacts.net/entry/css-texteffect/#-webkit-background-cliptext_CSS_effect

基本

HTMLは単純です。

<div class="clip-text">background-clip</div>

CSSも単純です。

background-image: url(photo.jpg);
-webkit-background-clip: text;
/* background-clip: text; オートプレフィクサー使っている場合はこちらでOK */
color: transparent;

最低限これだけで、テキストでのクリップができます。

background-clipは、HTML要素内の任意の範囲で背景をクリップすることができるもので、指定できる値は以下のものがあります。

background-clip: border-box;
background-clip: padding-box;
background-clip: content-box;
background-clip: text;

基本的には見ての通り、ボックスモデルでのクリップをするもので、

borderやpadding、contentの範囲でクリップできます。
特徴的なのがテキストでクリップできるというところです。

テキストの背景に、backgroundプロパティで背景画像を指定することで、表現の幅が広がります。

応用：疑似要素に同じ背景を指定し、ずらす

このように背景からテキストが浮かび上がるような効果がどのように作ってあるかというと、背景の画像は疑似要素となっています。

.clip-text {
  &::before{
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-image: url(photo.jpg);
    background-size: 130%;
    background-repeat: no-repeat;
    background-position: 70% 0;
    z-index: -1;
  }
}

それをbackground-positionでポジションをずらすことで、同じ画像の違う部分が背景に表示されます。

このとき、テキストの背景は動かないので、同じ画像で違う場所を使った文字が浮かび上がるという仕組みです。

-webkit-は必要か？

テキストで背景を切り取る方法を調べると、

-webkit-background-clip
-webkit-text-fill-color

を使った方法がでてきます。

background-clipに関しては、現時点（2022/09）では-webkitがないと、Chrome(ver.105),Chrome Androidで表示されないことを確認しました。safari(ver.15.3),firefox(ver.105.)は有効でした。

sassなどでオートプレフィクサーを使っていると、-webkit-は書かなくても大丈夫ですが、ピュアなCSSを書く場合は必要そうです。

また、-webkit-text-fill-colorはというと、colorプロパティと全く同じ役割です。

ではなぜ-webkit-text-fill-colorを使った方法があるのかと調べてみると、どうやら、webkit-text-strokeが使用できない場合にはcolorプロパティが使用されるが、その時colorがtransparentだったら文字が見えなくなるからとのこと。

https://stackoverflow.com/questions/9287552/difference-between-webkit-text-fill-color-and-color

今回はwebkit-text-strokeは使っていませんが、

「strokeもclipも、機能してたら文字がわかるが、機能してなかったら文字がわからなくなる」「そのとき文字色（colorプロパティ）が透明だったら困る」…ということは理解ができます。

しかし、-webkit-text-fill-color:transparent;にしていると、colorより優先されるのでどちらにせよtransparentになります。

いまのところbackgorund-clipが適用されないChromeで試してみましたが、-webkit-text-fill-color:transparent;が効いてしまうので、結果一緒でした。

仮に「backgorund-clipがきかないブラウザは-webkit-text-fill-colorもきかない」というルールがあれば成り立つかもしれませんが、今はそうではないので、-webkit-text-fill-colorではなくてcolor:transparentでいいのでは…と思いました。