4

divの背景の画像の上部に半透明のカラーレイヤーを追加しようとしています。私は以下を試しました：

background: url('myImage.jpg'), rgba(0,0,0,0.5);

また

background-image:url('myImage.jpg');
background-color:rgba(0,0,0,0.5);

ただし、どちらの場合も画像だけが表示されます。このdivを別のdivで色でラップできることは知っていますが、すべてを1つのdivで実行できる方法はありますか？

4

3 に答える 3

5

:afterセレクターを使用します。それはあなたの問題を解決する可能性があります。

.container:after {
    content: "";
    display: block;
    width: 300px;
    height: 200px;
    background-color:rgba(0,0,0,0.5);
}

例はここにあります-http://jsfiddle.net/ecYrS/2/

于 2012-11-05T19:00:43.717 に答える
1

CSSは、ネイティブに実行しようとしていることをサポートしていません。画像の上にRGBaレイヤーを配置する必要があります。基本的に背景画像の上に半透明のレイヤーが必要ですが、CSSは背景画像に優先順位を設定し、基本的に背景色を上書きします。

1つの考えは、アルファ透過PNGを試すことができるということですが、私は100％ではありません。

于 2012-11-05T18:42:22.187 に答える
-1

@Flynnはあなたが言ったのと同じ問題に直面しています。私はかなり便利な解決策を見つけました。

しかし方法があります！

rgba（）またはhsla（）を使用して透明なフラッドカラーを使用する代わりに、グラデーションを使用できます。グラデーションは技術的には背景画像であるため、スタック順で最初に来る（一番上になる）ことができないという規則の対象にはなりません。

/* Working method */
.tinted-image {
  background: 
    /* top, transparent red, faked with gradient */ 
    linear-gradient(
      rgba(255, 0, 0, 0.45), 
      rgba(255, 0, 0, 0.45)
    ),
    /* bottom, image */
    url(image.jpg);
}

詳細については、次のリンクを参照してください。

背景色の画像

于 2016-04-19T10:09:24.807 に答える