今回は、CSSを使ってテキストの形に背景画像を切り取る方法について解説します。
使用するプロパティはCSSの「background-clip;」プロパティ。このプロパティは背景がどこまで広がるかを定義し、'text'を指定すると、背景は文字の形状に切り取られます
それでは以下のサンプルを元に画像の切り取り方法を見ていきましょう。
画像の右に大きな文字を配置する
「container」クラスに背景画像を指定。h1セレクタに「position: absolute;」を指定し要素を背景画像と同じサイズに。「text-align: right;」で文字を右寄せする
<div class="container">
<h1>文字に<br>画像を<br>..</h1>
</div>
.container {
position: relative;
background-image:url(...);
width: 600px; height: 338px;
}
h1 {
position: absolute;
top: 0px; left: 0px;
width: 100%;height: 100%;
font-weight: bold;
font-size: 105px;
line-height: 1.1;
text-align: right;
}背景画像を文字の形に切り抜く
h1セレクタの「background: inherit;」で背景画像を継承。「color: transparent;」で文字を透過させ、「background-clip: text;」で画像を文字の形に切り抜くことで文字が背景と同化します。
.container{
background-image:url(...);
...
}
h1 {
position: absolute;
background: inherit;
background-clip: text;
-webkit-background-clip: text;
color: transparent;
...
}
画像と文字の間に背景を入れる
before疑似要素で「linear-gradient」を指定。透過させた白、黒の背景を中央で色分けし、文字の背面に配置し完成。
.container{...}
h1,h1::before {
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
}
h1{...}
h1::before {
background-image:
linear-gradient(90deg,
rgba(251, 253, 255, .3) 0 50%,
rgba(0, 0, 0, .9) 0 50%
);
content: '';
z-index: -1;
}
