Pourquoi ne puis-je pas utiliser l’image de fond et la couleur ensemble?

Ce que j’essaie de faire est d’afficher à la fois la background-color background-image , de sorte que la moitié de mon div couvre l’image d’arrière-plan de l’ombre droite et l’autre partie couvre la couleur d’arrière-plan.

Mais quand j’utilise background-image , la couleur disparaît.

Il est parfaitement possible d’utiliser une couleur et une image comme arrière-plan pour un élément.

Vous définissez les styles de background-color background-image . Si l’image est plus petite que l’élément, vous devez utiliser le style de background-position pour le placer à droite et, pour l’empêcher de se répéter et couvrir tout l’ background-repeat utilisez le style de background-repeat :

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

Ou en utilisant l’ backgroundbackground style composite:

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

Si vous utilisez l’ background style composite pour 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 qu’elle ne couvre 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 comporte des zones transparentes pour que la couleur d’arrière-plan soit visible.

utilisation

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

Pour colorer une image, vous pouvez utiliser un background CSS3 pour emstackr des images et un linear-gradient . Dans l’exemple ci-dessous, j’utilise un linear-gradient sans gradient réel. Le navigateur traite les dégradés comme des images (je pense que cela génère un bitmap et le superpose) et, par conséquent, emstack en réalité 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 graphique avec une teinte bleu clair, si vous aviez le png. Notez que l’ordre d’emstackment peut fonctionner en sens inverse de votre modèle mental, le premier élément étant en haut.

Excellente documentation par Mozilla, ici:

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

Outil pour construire les dégradés:

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

Note – ne fonctionne pas dans IE11! Je posterai une mise à jour lorsque je découvrirai pourquoi, depuis sa création.

Et pour append à cette réponse, assurez-vous que l’image elle-même a un arrière-plan transparent.

Voici un exemple d’utilisation de background-image et background-color ensemble:

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

Rendez la moitié de l’image transparente pour que la couleur de fond soit visible à travers elle.

Sinon, ajoutez simplement une autre div en prenant 50% de la valeur du conteneur et faites-la flotter à gauche ou à droite. Appliquez ensuite l’image ou la couleur.

Gecko a un bogue étrange où la définition de la background-color d’ background-color du sélecteur html couvrira l’ background-image d’ background-image de l’élément body, même si le body a un z-index plus important et que vous devriez voir l’ background-imagebackground-image du corps. background-image avec la background-color html basée uniquement sur la logique simple.

Gecko Bug

É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 image de fond et couleur de fond:

HTML

 

CSS

 article{height: 490px;background:url("Your IMAGE") no-repear center cover;opacity:1} canvas{widht: 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 faites le moi savoir si cela a fonctionné pour vous Merci

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