web-dev-qa-db-de.com

Wie überlagere ich ein Bild mit Farbe in CSS?

Zielsetzung

Ich möchte eine Farbüberlagerung für dieses Kopfzeilenelement. Wie kann ich das mit CSS machen?

Code

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

Sie sollten rgba verwenden, um Ihr Element mit Fotos zu überlagern. Mit rgba können Sie eine Farbe in CSS deklarieren, die Alphatransparenz unterstützt. du kannst .row als Overlayer wie folgt:

#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;
}

Etwas wie das. Fügen Sie einfach die Klasse overlay in den Header ein.

6
DevlshOne

Sie können eine negative, halbtransparente Superdicke-Umrandung verwenden ...

.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"/>

Für diese Lösung müssen Sie die genauen Größen der abgedeckten Objekte kennen.

5
elixon

Verwenden Sie mehrere Hintergrundfarben für das Element und einen linearen Farbverlauf als Farbüberlagerung, indem Sie sowohl Start- als auch Endfarbstopps als denselben Wert deklarieren.

Beachten Sie, dass Ebenen in einer Mehrfachhintergrunddeklaration ähnlich wie gerendert von oben nach unten gelesen werden. Legen Sie also zuerst Ihre Überlagerung und dann Ihr Hintergrundbild ab:

#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

Sie können die Funktion hue-rotate In der Eigenschaft filter verwenden. Es ist jedoch eine ziemlich dunkle Messung. Sie müssen wissen, um wie viel Grad das Farbrad gedreht werden muss, um den gewünschten Farbton zu erhalten. Beispiel:

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

Wenn Sie den richtigen Farbton gefunden haben, können Sie die Funktionen brightness und entweder grayscale oder saturate kombinieren, um den richtigen Farbton zu finden. Beispiel:

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

Die Eigenschaft filter hat in Webkit ein Herstellerpräfix. Der endgültige Code lautet also:

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

1
Lewis Donovan

Wenn Ihnen die absolute Positionierung nichts ausmacht, können Sie Ihr Hintergrundbild positionieren und anschließend eine Überlagerung mit Deckkraft hinzufügen.

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;
}

Siehe hier: http://jsfiddle.net/4yh9L/

0
Conqueror

In Helpshift benutzten sie die Klasse home-page wie

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;
}

sie können ähnlich wie folgt versuchen

0
Thillai Narayanan