作成方法：透過テキスト

CSSを使用してレスポンシブな透過テキスト（剪切テキストまたはカットアウトテキストとも呼ばれます）を作成する方法を学びます。

透過テキストは背景画像の上にカットアウトされたように見える透明なテキストです：

WUHAN

自分で試してみる

注意：この例はInternet ExplorerやEdgeには適用されません。

透過テキストの作成方法

第1ステップ - HTMLを追加します：

<div class="image-container">
  <div class="text">NATURE</div>
</div>

第2ステップ - CSSを追加します：

mix-blend-mode 属性を使用して、画像に透過テキストを追加できます。ただし、IEやEdgeはサポートしていません：

.image-container {
  background-image: url("img_nature.jpg"); /* 使用する画像 - 非常に重要！ */
  background-size: cover;
  position: relative; /* 剪切テキストを画像中央に配置する必要があります */
  height: 300px; /* 一定の高さ */
}
.text {
  background-color: white;
  color: black;
  font-size: 10vw; /* レスポンシブなフォントサイズ */
  font-weight: bold;
  margin: 0 auto; /* テキストコンテナを中央に配置します */
  padding: 10px;
  width: 50%;
  text-align: center; /* テキストを中央に配置します */
  position: absolute; /* テキストを配置します */
  top: 50%; /* テキストを中央に配置します */
  left: 50%; /* テキストを中央に配置します */
  transform: translate(-50%, -50%); /* テキストを中央に配置します */
  mix-blend-mode: screen; /* テキストのカットアウトを可能にします */
}

自分で試してみる

黒色のコンテナテキストを望む場合、以下を設定してください： mix-blend-mode に変更します multiply、背景色を黒色に、色を白色に変更します：

例

.text {
  background-color: black;
  color: white;
  mix-blend-mode: multiply;
  ....
}

自分で試してみる