画像の上にテキストを重ねる：CSS のバックドロップフィルターで読みやすさを向上させる

はじめに

この実験では、CSS を使って画像の上にテキストを重ねる方法について学びます。この実験の目的は、背景画像や色に関係なく読みやすいように、画像の上にテキストを表示する方法を教えることです。backdrop-filterプロパティを使って、テキストにぼかしや明るさの効果を与え、プロフェッショナルで視覚的に魅力的なデザインを作成する方法を学びます。

これは Guided Lab です。学習と実践を支援するためのステップバイステップの指示を提供します。各ステップを完了し、実践的な経験を積むために、指示に注意深く従ってください。過去のデータによると、この初級レベルの実験の完了率は 100%です。学習者から 100% の好評価を得ています。

画像の上にテキストを重ねる

VM 内には既にindex.htmlとstyle.cssが用意されています。

画像の上にオーバーレイをかけてテキストを表示するには、backdrop-filterプロパティを使ってblur(14px)とbrightness(80%)の効果を適用します。これにより、背景画像や色に関係なくテキストが読みやすくなります。以下は HTML コードの例です。

<div>
  <h3 class="text-overlay">Hello, World</h3>
  <img src="https://picsum.photos/id/1050/1200/800" />
</div>

そして対応する CSS コードです。

div {
  position: relative;
}

.text-overlay {
  position: absolute;
  top: 0;
  left: 0;
  padding: 1rem;
  font-size: 2rem;
  font-weight: 300;
  color: white;
  backdrop-filter: blur(14px) brightness(80%);
}

右下隅の「Go Live」をクリックして、ポート 8080 でウェブサービスを実行してください。その後、Web 8080タブを更新してウェブページをプレビューできます。

まとめ

おめでとうございます！あなたは画像の上にテキストを重ねる実験を完了しました。あなたの技術を向上させるために、LabEx でさらに多くの実験を練習することができます。