web-dev-qa-db-ja.com

CSSで画像を色でオーバーレイする方法は？

目的

このヘッダー要素にカラーオーバーレイが必要です。 CSSでこれを行うにはどうすればよいですか？

コード

HTML

<header id="header">
    <div class="row">
        <div class="col-xs-12">
            ...
        </div>
    </div>
</header>

CSS

#header {
    background: url(../img/bg.jpg) 0 0 no-repeat fixed;
    height: 100%;
    overflow: hidden;
    color: #FFFFFF
 }
htmlcsshtml5css3overlay
39
LittleLebowski

Rgbaを使用して、photos.rgbaで要素をオーバーレイする必要があります。これは、アルファ透明度のサポートを含むCSSで色を宣言する方法です。次のように.rowをオーバーレイヤーとして使用できます。

#header {
    background: url(../img/bg.jpg) 0 0 no-repeat fixed;
    height: 100%;
    overflow: hidden;
    color: #FFFFFF
 }

.row{
    background: rgba(39,62,84,0.82);
    overflow: hidden;
    height: 100%;
    z-index: 2;
}
49
Ramin
#header.overlay {
    background-color: SlateGray;
    position:relative;
    width: 100%;
    height: 100%;
    opacity: 0.20;
    -moz-opacity: 20%;
    -webkit-opacity: 20%;
    z-index: 2;
}

このようなもの。明らかに、overlayクラスをヘッダーに追加するだけです。

6
DevlshOne

負の極太半透明ボーダーを使用できます...

.red {
    outline: 100px solid rgba(255, 0, 0, 0.5) !important;
    outline-offset: -100px;
    overflow: hidden;
    position: relative;
    height: 200px;
    width: 200px;
}
<div class="red">Anything can be red.</div>
<h1>Or even image...</h1>
<img src="https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-logo.png?v=9c558ec15d8a" class="red"/>

このソリューションでは、対象オブジェクトの正確なサイズを知る必要があります。

5
elixon

要素で複数のバックゴーランドを使用し、開始と終了の両方のカラーストップを同じ値として宣言することにより、線形オーバーレイをカラーオーバーレイとして使用します。

マルチバックグラウンド宣言のレイヤーは、レンダリングされるように上から下に読み取られるため、最初にオーバーレイを配置し、次にbgイメージを配置することに注意してください。

#header {
  background: 
    linear-gradient(to bottom, rgba(100, 100, 0, 0.5), rgba(100, 100, 0, 0.5)) cover,
    url(../img/bg.jpg) 0 0 no-repeat fixed;
  height: 100%;
  overflow: hidden;
  color: #FFFFFF
}
2
mindfullsilence

filterプロパティでhue-rotate関数を使用できます。ただし、これは非常に不明瞭な測定値です。目的の色相に到達するために、移動する必要があるカラーホイールの周りの角度を知る必要があります。次に例を示します。

header { filter: hue-rotate(90deg); }

正しい色相が見つかったら、brightnessとgrayscaleまたはsaturateのいずれかの関数を組み合わせて、正しい色合いを見つけることができます。次に例を示します。

header { filter: hue-rotate(90deg) brightness(10%) grayscale(10%); }

filterプロパティにはWebkitのベンダープレフィックスがあるため、最終的なコードは次のようになります。

header { -webkit-filter: hue-rotate(90deg) brightness(10%) grayscale(10%); filter: hue-rotate(90deg) brightness(10%) grayscale(10%); }

1
Lewis Donovan

絶対配置を使用してもかまわない場合は、背景画像を配置してから、不透明度を使用してオーバーレイを追加できます。

div {
    width:50px;
    height:50px;
    background:   url('http://images1.wikia.nocookie.net/__cb20120626155442/adventuretimewithfinnandjake/images/6/67/Link.gif');
    position:absolute;
    left:0;
    top:0;
}

.overlay {
   background:red;
   opacity:.5;
}

こちらをご覧ください： http://jsfiddle.net/4yh9L/

0
Conqueror

ヘルプシフトでは、クラスhome-pageを次のように使用しました

HTML

<div class="page home-page">...</div>

CSS

.home-page {
    background: transparent url("../images/backgrounds/image-overlay.png") repeat 0 0;
    background: rgba(39,62,84,0.82);
    overflow: hidden;
    height: 100%;
    z-index: 2;
}

あなたはこのような同様のものを試すことができます

0
Thillai Narayanan