CSS のみを使用して背景画像に色をオーバーレイするにはどうすればよいですか?

CSS を使用して画像を色でオーバーレイする

追加の手段を使用せずに、背景画像に色をオーバーレイすることで Web サイトのビジュアルを強化する方法を探しています。要素？ CSS は、追加の DIV やホバー効果の必要性を排除する洗練されたソリューションを提供します。

オーバーレイにグラデーションを利用する

1 つのアプローチには、複数の背景を利用することが含まれます。たとえば、画像上に半透明のグラデーションを作成できます:

html {
  min-height: 100%;
  background:
    linear-gradient(0deg, rgba(255, 0, 150, 0.3), rgba(255, 0, 150, 0.3)),
    url(image.jpg);
  background-size: cover;
}

インセット シャドウを使用する

または、実質的なインセット シャドウを作成することもできます:

.overlay {
  inset: 0;
  box-shadow: inset 0 0 9999px 100% rgba(0, 0, 0, 0.8);
}

この CSS ブロックを背景の親要素内に挿入しますimage.

これらのテクニックは両方とも望ましい効果を実現し、CSS のみを使用して背景画像に単色のオーバーレイを追加できます。

以上がCSS のみを使用して背景画像に色をオーバーレイするにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。