背景画像の上の文字を切り抜きたい【css】background-clip

画像の上に文字を置いてベタ色を塗るのではなく、
ちょっとおしゃれに、文字の形に切り抜いてみたり、文字の部分だけオーバーレイをかけてみたりしてみます。

切り抜くときに使うのは、background-clip。

クロームやsafariでは対応していないので注意してください。

切り抜きはbackgroundで画像を読んでpを切り抜いている感じなので、ほぼcssの調整だけでできるので便利。

切り抜いてみるDEMO

切り抜くCSS

　
.demo05 p {
    font-weight:bold;
    font-size:5rem;
    background: url(https://office-kibunya.com/wp-content/uploads/2019/10/kumo.jpg)no-repeat center bottom;
    display: block;
    line-height: 6rem;
    height: 11rem;
    color: #fff;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

切り抜くHTMLはこれだけ

　
<div class="demo05">
<p>切り抜いてみた感じ<br>
test</p>
</div>

今度オーバーレイにチャレンジ。こちらも背景で出している画像の上に文字を乗せてみます。
cssでは文字を画像の上に単純に乗せただけなので、positionで調整するといい感じになります。

オーバーレイっぽいDEMO

オーバーレイっぽくするCSS

.demo06 {
    position: relative !important;
    background-position: center;
    background-size: cover;
    background-image: url(https://office-kibunya.com/wp-content/uploads/2019/10/kumo.jpg);
    background-color: #ffffff00 !important;
    background-blend-mode: overlay;
    width: 100%;
    min-height: 23rem;
    height: 100%;
    display: block;
}
 .demo06 p {
    color: #292424;
    mix-blend-mode: overlay;
    font-size: 2rem;
    font-weight: bold;
    width: 100%;
    display: inline-block;
    position: absolute;
    left: 0;
    right: 0rem;
    top: 4rem;
    bottom: 0;
    margin: auto;
    text-align: center;
    vertical-align: middle;
}

オーバーレイっぽいHTML

　
<div class="demo06">

<p>オーバーレイしてみた感じ<br>
test</p>
</div>

どちらも背景で作れるから、見出しとか見せたいところを表現するときに知ってると便利です。