CSS を使用して要素の背景を簡単に暗くする方法

CSS を使用して要素を暗くする: 便利なトリック

CSS を使用して要素の背景を暗くする現在の方法は退屈な場合があり、暗い色の 16 進コード。この記事では、背景画像を利用して目的の暗め効果をエレガントに実現する便利な代替方法を紹介します。

問題: 面倒な手動暗め

ボタンの上にマウスを置くと、ユーザーの対話性を高めるために背景色を暗くするのが一般的です。以前は、以下に示すように、CSS で暗い 16 進コードを指定することでこれを実現していました:

ただし、適切な暗い 16 進コードを見つけるには時間がかかり、不正確になる可能性があります。

解決策: 背景画像オーバーレイ

この手法では、背景色プロパティを変更する代わりに、背景画像と線形グラデーションを使用して要素の上に暗いレイヤーを導入します。

この暗いオーバーレイは既存の背景色の上に適用され、テキストの色を変えることなく微妙に暗くする効果を生み出します。 40% の不透明度により、その強度を下げながら、下にある背景色を表示したままにすることができます。

実装と例

この手法を実証するには、次の HTML と CSS を考慮してください。

ボタンには元の背景色が表示され、ボタンの上にマウスを置くと、背景色に関係なく、微妙に暗くなる効果が適用されます。

以上がCSS を使用して要素の背景を簡単に暗くする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。