CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSSを使って透明な背景のテキスト付き画像を作成する方法

CSSで透明な背景テキスト付き画像を作成する方法

Webサイトのバナーやヒーローセクションなどでは、画像の上にテキストを重ねて表示することがよくあります。このとき、テキストに半透明の背景色を加えることで、画像との視認性を保ちながら、洗練されたデザインに仕上げることができます。

以下に、CSSを使って透明な背景テキスト付き画像を作成するコード例を示します。

実装のポイント

  • 画像を包む親要素に position: relative; を指定します。
  • テキストを含む子要素に position: absolute; と bottom: 0; を指定し、画像の下端に配置します。
  • 背景色は rgba() で指定し、アルファ値（透明度）を 0.5 に設定することで、半透明の黒背景を実現します。

コード例

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
   box-sizing: border-box;
}
body {
   font-family: Arial;
   font-size: 17px;
}
.imageContainer {
   display: inline-block;
   position: relative;
}
.imageContainer .imageContent {
   position: absolute;
   bottom: 0;
   background: rgba(29, 6, 43, 0.5); /* 黒背景（透明度0.5） */
   color: #f1f1f1;
   width: 100%;
   padding: 20px;
}
</style>
</head>
<body>
<h2>透明なテキスト付き画像</h2>
<div class="imageContainer">
<img src="https://i.picsum.photos/id/59/500/500.jpg">
<div class="imageContent">
<h1>風景</h1>
<h3>フェンス、有刺鉄線、草が広がる美しい風景</h3>
</div>
</div>
</body>
</html>

出力結果

上記のコードを実行すると、以下のような出力が得られます。

CSSを使って透明な背景のテキスト付き画像を作成する方法

画像の下部に半透明の黒い帯が表示され、その上に白いテキストが重ねられています。アルファ値の数値を変更すれば、背景の透明度を自由に調整できるので、画像の明るさやデザインに合わせて最適な値を見つけてみてください。

  1. CSSで光るテキスト（グロー効果）を作成する方法

    CSSで光るテキスト（グロー効果）を作成するには、text-shadowプロパティと@keyframesによるアニメーションを組み合わせます。複数の影を重ねて光の輪を表現し、それをアニメーションで明滅させることで、文字が脈動するように輝く演出が可能です。 コード例 <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> body {

  2. CSSのclip-pathでテキスト入りのコメントボックス（吹き出し）を作成する方法

    CSSのclip-pathプロパティを活用することで、吹き出しのようなコメントボックスを作成できます。画像ファイルに頼らずCSSだけで完結するため、軽量でメンテナンス性が高く、デザインの調整も容易です。 clip-pathプロパティの基本構文 clip-pathは、要素の表示範囲を切り抜く（クリップする）ためのプロパティです。基本的な構文は以下のとおりです。 Selector {    clip-path: /*値*/; } polygon()関数を使うと、複数の座標点を指定して三角形などの多角形を描画できます。この仕組みを利用して、コメントボックスの下に付ける「しっ