Pourquoi ne puis-je pas utiliser l'image d'arrière-plan et la couleur ensemble?

Ce que j'essaie de faire, c'est d'afficher les deux background-coloret background-image, de sorte que la moitié de mon divcouvre l'image d'arrière-plan de l'ombre droite et l'autre partie gauche couvre la couleur d'arrière-plan.

Mais quand je l'utilise background-image, la couleur disparaît.

Il est parfaitement possible d'utiliser à la fois une couleur et une image comme arrière-plan d'un élément.

Vous définissez les styles background-coloret background-image. Si l'image est plus petite que l'élément, vous devez utiliser le background-positionstyle pour la placer à droite et pour l'empêcher de se répéter et de couvrir tout l'arrière-plan, vous utilisez le background-repeatstyle:

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

Ou en utilisant le style composite background:

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

Si vous utilisez le style composite backgroundpour définir les deux séparément, seul le dernier sera utilisé, c'est une des raisons possibles pour lesquelles votre couleur n'est pas visible:

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

Il n'y a aucun moyen de limiter spécifiquement l'image d'arrière-plan pour ne couvrir qu'une partie de l'élément, vous devez donc vous assurer que l'image est plus petite que l'élément, ou qu'elle a des zones transparentes, pour que la couleur d'arrière-plan soit visible.

Pour teinter une image, vous pouvez utiliser CSS3 backgroundpour empiler des images et un fichier linear-gradient. Dans l'exemple ci-dessous, j'utilise un linear-gradientsans gradient réel. Le navigateur traite les dégradés comme des images (je pense qu'il génère en fait un bitmap et le superpose) et donc, empile en fait plusieurs images.

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

Donnera un papier millimétré avec une teinte bleu clair, si vous aviez le png. Notez que l'ordre d'empilement peut fonctionner à l'inverse de votre modèle mental, le premier élément étant en haut.

Excellente documentation de Mozilla, ici:

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

Outil de construction des dégradés:

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

Remarque - ne fonctionne pas dans IE11! Je publierai une mise à jour quand je découvrirai pourquoi, puisque c'est censé le faire.

utilisation

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

Et pour ajouter à cette réponse, assurez-vous que l'image elle-même a un fond transparent.

Voici un exemple d'utilisation background-imageet background-colorensemble:

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

En fait, il existe un moyen d'utiliser une couleur d'arrière-plan avec une image d'arrière-plan. Dans ce cas, la partie d'arrière-plan sera remplie avec cette couleur spécifiée au lieu d'une couleur blanche / transparente.

Pour y parvenir, vous devez définir la backgroundpropriété comme suit:

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

Notez la virgule et le code couleur après no-repeat ; cela définit la couleur d'arrière-plan que vous souhaitez.

J'ai découvert cela dans cette vidéo YouTube , mais je ne suis en aucun cas affilié à cette chaîne ou à cette vidéo.

Rendre la moitié de l'image transparente pour que la couleur d'arrière-plan soit visible à travers.

Sinon, ajoutez simplement un autre div occupant 50% du div du conteneur et faites-le flotter à gauche ou à droite. Appliquez ensuite soit l'image, soit la couleur.

Gecko a un bug étrange où le réglage du sélecteur background-colorpour le htmlsélecteur couvrira l' background-imageélément de corps même si l' bodyélément en fait a un plus grand z-index et vous devriez être en mesure de voir le corps background-imageavec lehtml background-color fonction purement sur la logique simple.

Bug Gecko

Évitez ce qui suit ...

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

Solution de contournement

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

Bonjour à tous, j'ai essayé une autre façon de combiner l'image d'arrière-plan et la couleur d'arrière-plan:

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

S'il vous plaît laissez-moi savoir si cela a fonctionné pour vous Merci

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