0

CSSを使って単色で画像をブレンドしたいと思います。これはどのように行うことができますか？

これは私がこれまでに得たものです：

header {
  width: 900px;
  height: 60px; 
  background-image: url(../images/banner.jpg);
  background-color: rgba(51,102,153,0.5);
}

それは動作していません！

私はこれについて頭を悩ませることができません。

助けてくれてありがとう！

4

3 に答える 3

6

現在受け入れられている答えとそれは実際に機能する代替手段です。ただし、どちらも実際のコンテンツに背景画像を使用します。このメソッドは img タグを使用します。

HTML

<div class="blend">
<img src="http://sp9.fotolog.com/photo/41/8/54/butterlyinthebox/1243705008574_f.jpg" alt=" " />
</div>​

CSS

.blend {
    background: red;
    display: inline-block;
}

.blend img {
    opacity: 0.5;
}

このフィドルを参照してください。

于 2012-12-03T13:31:14.057 に答える
3

2つのdivを使用します。このフィドルを参照してください：

HTML：

<div id="wrapper">
    <div id="content"></div>  
</div>

CSS：

#wrapper
{
    background: url("http://sp9.fotolog.com/photo/41/8/54/butterlyinthebox/1243705008574_f.jpg") no-repeat;
}

#content
{
    background-color: yellow;
    opacity: 0.5;
    width: 477px;
    height: 318px;
}
于 2012-12-03T12:40:00.093 に答える
1

現在受け入れられている回答は機能しますが、意味的に正しくなく、いくつかの最適化の恩恵を受けるでしょう。

これには疑似after要素を使用できるため、これに追加のマークアップを導入する必要はありません。したがって、マークアップは次のようになります。

<div id="content"></div>

CSSは冗長ですが、より表現力豊かです。「ラッパー」に実際のコンテンツ（画像）が含まれているのが好きではありませんが、「コンテンツ」は単なる色です。また、div全体をフェードする必要はありませんが、色にアルファチャンネルを使用できます。

#content {
    position: relative;
    background: url("http://sp9.fotolog.com/photo/41/8/54/butterlyinthebox/1243705008574_f.jpg") no-repeat;
    width: 477px;
    height: 318px;
}
#content:after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: rgba(255,0,0,0.5);
    pointer-events: none;
}

jsfiddle

于 2012-12-03T13:15:29.410 に答える