CSSを使用した画像上のテキストの目立たせ方

2024-02-17 02:29 CSS テキスト 画像

  1. テキストの色と背景色の調整:

    • テキストの色を明るくするか、背景色を濃くすることで、テキストを目立たせることができます。

    • 例えば、以下のCSSコードを使用して、テキストの色を白にし、背景色を黒に設定します。

      .text-on-image {
color: white;
background-color: black;
}

  2. テキストの影の追加:

    • テキストに影を追加することで、テキストを浮き上がらせ、目立たせることができます。

    • 例えば、以下のCSSコードを使用して、テキストに黒い影を追加します。

      .text-on-image {
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
}

  3. テキストの位置の調整:

    • テキストの位置を調整することで、画像上で目立たせることができます。

    • 例えば、以下のCSSコードを使用して、テキストを画像の中央に配置します。

      .text-on-image {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}

これらの方法を組み合わせることで、画像上のテキストを目立たせることができます。適用したいテキストに対応するCSSクラスまたはIDを指定し、上記のコードを適用してください。