単一の CSS プロパティで背景画像と不透明度の両方を設定できますか?

単一のプロパティで背景画像と不透明度を設定する

質問:

単一の CSS プロパティですか?その場合、どのようにすればよいですか?

元の画像の問題:

提供された画像 (「tandem.jpg」) が明るすぎるため、不透明度を下げたいと考えています。背景としての使用を維持しながら約 0.2 までimage.

解決策:

背景画像と不透明度の両方を同時に設定できる直接の CSS プロパティはありませんが、次のコマンドを使用すると、目的の結果を得ることができます。手法:

#main {
    position: relative;
}
#main:after {
    content : "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    background-image: url(/wp-content/uploads/2010/11/tandem.jpg); 
    width: 100%;
    height: 100%;
    opacity : 0.2;
    z-index: -1;
}

説明:

• メイン要素 (#main) の子として新しい要素 (#main:after) を作成します。この要素は、背景画像をオーバーレイするために使用されます。
• 親要素を基準にして相対的に配置できるように、位置を絶対に設定します。
• content プロパティを使用して空の文字列を設定します。この要素を効果的に非表示にしますが、背景スタイルを保持できるようにします。
• 背景に必要な透明度レベルを達成するには、その不透明度を 0.2 に設定します。 image.
• その z-index を -1 に設定して、メイン要素のコンテンツの背後に表示されるようにします。

このテクニックは、メイン要素の上に透明なレイヤーを効果的に作成し、背景を表示します。指定された不透明度の画像。

以上が単一の CSS プロパティで背景画像と不透明度の両方を設定できますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。