Warum kann ich Hintergrundbild und Farbe nicht zusammen verwenden?

Ich versuche, beide background-colorund background-imageso anzuzeigen, dass die Hälfte von mir divdas rechte Schattenhintergrundbild und der andere linke Teil die Hintergrundfarbe abdeckt.

Aber wenn ich benutze background-image, verschwindet die Farbe.

Es ist durchaus möglich, sowohl eine Farbe als auch ein Bild als Hintergrund für ein Element zu verwenden.

Sie legen die background-colorund background-imageStile fest. Wenn das Bild kleiner als das Element ist, müssen Sie den background-positionStil verwenden, um es rechts zu platzieren und zu verhindern, dass es den gesamten Hintergrund wiederholt und abdeckt. Verwenden Sie den background-repeatStil:

background-color: green;
background-image: url(images/shadow.gif);
background-position: right;
background-repeat: no-repeat;

Oder verwenden Sie den zusammengesetzten Stil background:

background: green url(images/shadow.gif) right no-repeat;

Wenn Sie den zusammengesetzten Stil verwenden background, um beide getrennt festzulegen, wird nur der letzte verwendet. Dies ist ein möglicher Grund, warum Ihre Farbe nicht sichtbar ist:

background: green; /* will be ignored */
background: url(images/shadow.gif) right no-repeat;

Es gibt keine Möglichkeit, das Hintergrundbild so zu beschränken, dass es nur einen Teil des Elements abdeckt. Sie müssen daher sicherstellen, dass das Bild kleiner als das Element ist oder transparente Bereiche aufweist, damit die Hintergrundfarbe sichtbar ist.

Um ein Bild zu tönen, können Sie CSS3 verwenden, backgroundum Bilder und a zu stapeln linear-gradient. Im folgenden Beispiel verwende ich a linear-gradientohne tatsächlichen Farbverlauf. Der Browser behandelt Farbverläufe als Bilder (ich denke, er generiert tatsächlich eine Bitmap und überlagert sie) und stapelt daher tatsächlich mehrere Bilder.

background: linear-gradient(0deg, rgba(2,173,231,0.5), rgba(2,173,231,0.5)), url(images/mba-grid-5px-bg.png) repeat;

Wird ein Millimeterpapier mit hellblauer Tönung ergeben, wenn Sie das PNG hatten. Beachten Sie, dass die Stapelreihenfolge möglicherweise umgekehrt zu Ihrem mentalen Modell funktioniert, wobei das erste Element oben liegt.

Hervorragende Dokumentation von Mozilla, hier:

https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_multiple_backgrounds

Werkzeug zum Erstellen der Verläufe:

http://www.colorzilla.com/gradient-editor/

Hinweis - funktioniert nicht in IE11! Ich werde ein Update veröffentlichen, wenn ich herausfinde, warum, da es soll.

verwenden

background:red url(../images/samle.jpg) no-repeat left top;

Um diese Antwort zu ergänzen , stellen Sie sicher, dass das Bild selbst einen transparenten Hintergrund hat.

Hier ist ein Beispiel für die Verwendung von background-imageund background-colorzusammen:

.box {
  background-image: repeating-linear-gradient( -45deg, rgba(255, 255, 255, .2), rgba(255, 255, 255, .2) 15px, transparent 15px, transparent 30px);
  width: 100px;
  height: 100px;
  margin: 10px 0 0 10px;
  display: inline-block;
}

<div class="box" style="background-color:orange"></div>
<div class="box" style="background-color:green"></div>
<div class="box" style="background-color:blue"></div>

Tatsächlich gibt es eine Möglichkeit, eine Hintergrundfarbe mit einem Hintergrundbild zu verwenden. In diesem Fall wird der Hintergrundteil mit der angegebenen Farbe anstelle einer weiß / transparenten Farbe gefüllt.

Um dies zu erreichen, müssen Sie die backgroundEigenschaft folgendermaßen festlegen :

.bg-image-with-color {
    background: url("example.png") no-repeat, #ff0000;
}

Beachten Sie das Komma und den Farbcode danach no-repeat; Hiermit wird die gewünschte Hintergrundfarbe festgelegt.

Ich habe dies in diesem YouTube-Video entdeckt , bin jedoch in keiner Weise mit diesem Kanal oder Video verbunden.

Machen Sie die Hälfte des Bildes transparent, damit die Hintergrundfarbe sichtbar wird.

Andernfalls fügen Sie einfach ein weiteres Div hinzu, das 50% des Container-Divs aufnimmt, und schweben es entweder nach links oder rechts. Wenden Sie dann entweder das Bild oder die Farbe darauf an.

Gecko hat einen seltsamen Fehler, durch Einstellung des background-colorfür die htmlWähler werden die Vertuschung background-imagedes Körperelementes , obwohl das bodyElement in der Tat einen größeren z-Index und Sie sollen den Körper zu sehen , in der Lage background-imagezusammen mit der html background-colorBasis rein auf einfache Logik.

Gecko Bug

Vermeiden Sie Folgendes ...

html {background-color: #fff;}
body {background-image: url(example.png);}

Umgehen

body {background-color: #fff; background-image: url(example.png);}

Hallo allerseits, ich habe einen anderen Weg versucht, Hintergrundbild und Hintergrundfarbe miteinander zu kombinieren:

HTML

<article><canvas id="color"></canvas></article>

CSS

article {
  height: 490px;
  background: url("Your IMAGE") no-repeat center cover;
  opacity:1;
} 

canvas{
  width: 100%; 
  height: 490px; 
  opacity: 0.9;
}

JAVASCRIPT

window.onload = init();

var canvas, ctx;

function init(){
  canvas = document.getElementeById('color'); 
  ctx = canvas.getContext('2d'); 
  ctx.save();  
  ctx.fillstyle = '#00833d'; 
  ctx.fillRect(0,0,490,490);ctx.restore();
}

Bitte lassen Sie mich wissen, ob es bei Ihnen funktioniert hat. Danke

background:url(directoryName/imageName.extention) bottom left no-repeat; 
background-color: red;