Pourquoi ne puis-je pas utiliser l'image de fond et la couleur ensemble?
Ce que j'essaie de faire est de montrer à la fois background-color et background-image, de sorte que la moitié de mon div couvrira l'image de fond d'ombre droite, et l'autre partie gauche couvrira la couleur d'arrière-plan.
Mais quand j'utilise background-image, la couleur disparaît.
9 réponses
Il est parfaitement possible d'utiliser à la fois une couleur et une image comme arrière-plan pour un élément.
Vous définissez les styles background-color et background-image. Si l'image est plus petite que l'élément, vous devez utiliser le background-position style de la placer à la droite, et pour l'empêcher de répéter et couvrant l'ensemble de l'arrière-plan que vous utilisez background-repeat style:
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 background pour définir les deux séparément, seul le dernier sera utilisé, c'est une des raisons pourquoi 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.
Utiliser
background:red url(../images/samle.jpg) no-repeat left top;
Pour teinter une image, vous pouvez utiliser CSS3 background pour empiler des images et un linear-gradient. Dans l'exemple ci-dessous, j'utilise un linear-gradient sans dégradé. Le navigateur traite les dégradés comme des images (je pense qu'il génère réellement une image bitmap et la superpose) et empile donc 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'empilement peut fonctionner à l'inverse de votre modèle mental, le premier élément étant au-dessus.
Excellente documentation de 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 quand je saurai pourquoi, puisque c'est censé le faire.
Et pour ajouter à 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;
}<div class="box" style="background-color:orange"></div>
<div class="box" style="background-color:green"></div>
<div class="box" style="background-color:blue"></div>Rendre la moitié de l'image transparente afin que la couleur de fond soit visible à travers elle.
Sinon, ajoutez simplement un autre div en prenant 50% du Div du conteneur et faites-le flotter à gauche ou à droite. Appliquez ensuite l'image ou la couleur.
Gecko a un bug étrange où la définition du background-color pour le sélecteur html couvrira le {[4] } de l'élément body même si l'élément body en effet a un indice z plus grand et vous devriez {[11] } être capable de voir le background-image du corps avec le html background-color basé uniquement sur une logique simple.
Bug Gecko
Évitez ce qui suit...
html {background-color: #fff;}
body {background-image: url(example.png);}
Travail Autour De
body {background-color: #fff; background-image: url(example.png);}
Bonjour à tous, j'ai essayé une autre façon de combiner background-image et background-color ensemble:
HTML
<article><canvas id="color"></canvas></article>
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();}
Veuillez me faire savoir si cela a fonctionné pour vous Merci
background:url(directoryName/imageName.extention) bottom left no-repeat;
background-color: red;