webサイト制作の勉強|2018月2月クラスブログ

webサイト制作の勉強に関する解説ブログです。

background-clipとtext-fill-colorを使ってcssを使って文字で画像を切り抜く

以前、Photoshopクリッピングマスクを使い、文字で画像を切り抜く加工を行いましたが、css3の「background-clip」と「text-fill-color」を使う事で同じような表現が出来るようになります。

background-clip

background-clipプロパティは、背景の適用範囲を指定する際に使用します。テキスト部分に背景画像を適応させたい場合、

-webkit-background-clip: text;

と指定します。
※注意 2017月12月現在、-webkit-のベンダープレフィックスが記述が必要です。



さらに

-webkit-text-fill-color: transparent;


codepen.io

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>clip-text</title>
<style>
html,body,h1 {
  margin:0;
  padding:0;
}
body {
  overflow-x:hidden;
}
header {
  width:100%;
  height:30vh;
  background:#999999;
}
.box {
  width:100%;
  height:70vh;
  background:#FFF;
  position:relative;
}
h1 {
  background:url(img/bg.jpg) no-repeat center 75%/cover;
  width:100%;
  height:70vh;
  text-align:center;
  font-size:200px;
  line-height:70vh;
  position:absolute;
  top:0;
  left:0;
  -webkit-background-clip:text;/*テキストの形でクリッピングする*/
  -webkit-text-fill-color:transparent;/*テキストの塗りを透明に*/
  white-space:nowrap;
  text-indent:1em;
  animation:txt-anime 20s 0.5s linear infinite;
}
@keyframes txt-anime {
  0%{ text-indent:1em;}
  100%{ text-indent:-13.35em;}
}

</style>
</head>
<body>
<header></header>
<div class="box">
<h1>
<span id="line1">沖縄の海は青くて綺麗でした。</span>
<span id="line2">沖縄の海は青くて綺麗でした。</span>
</h1>
</div>
</body>
</html>