CSS : image de fond sur la couleur de fond

Question

J'ai un panneau que je colore en bleu si ce panneau est sélectionné (cliqué dessus). De plus, j'ajoute un petit signe ( .png ) à ce panneau, ce qui indique que le panneau sélectionné a déjà été sélectionné auparavant.

Ainsi, si l'utilisateur voit par exemple 10 panneaux et que 4 d'entre eux comportent ce petit signe, il sait qu'il a déjà cliqué sur ces panneaux auparavant. Cela fonctionne bien jusqu'à présent. Le problème est que je ne peux pas afficher le petit signe et rendre le panneau bleu en même temps.

J'ai mis le panneau en bleu avec le css background: #6DB3F2; et l'image de fond avec background-image: url('images/checked.png') . Mais il semble que la couleur de fond soit au-dessus de l'image et qu'on ne puisse pas voir le signe.

Est-il donc possible de définir z-index es pour la couleur et l'image d'arrière-plan ?

Answer 1

Vous devez utiliser le nom complet de la propriété pour chacun d'eux :

background-color: #6DB3F2;
background-image: url('images/checked.png');

Ou bien, vous pouvez utiliser l'abréviation "background" et tout spécifier en une seule ligne :

background: url('images/checked.png'), #6DB3F2;

Answer 2

Pour moi, cette solution n'a pas fonctionné :

background-color: #6DB3F2;
background-image: url('images/checked.png');

Mais au lieu de cela, ça a fonctionné dans l'autre sens :

<div class="block">
<span>
...
</span>
</div>

le css :

.block{
  background-image: url('img.jpg') no-repeat;
  position: relative;
}

.block::before{
  background-color: rgba(0, 0, 0, 0.37);
  content: '';
  display: block;
  height: 100%;
  position: absolute;
  width: 100%;
}

Answer 3

Et si vous voulez générer une ombre noire en arrière-plan, vous pouvez utiliser ce qui suit :

background:linear-gradient( rgba(0, 0, 0, 0.5) 100%, rgba(0, 0, 0, 0.5)100%),url("logo/header-background.png");

Answer 4

Sur la base de Docs Web du MDN vous pouvez définir plusieurs arrière-plans en utilisant un raccourci background les propriétés ou les biens individuels, sauf pour background-color . Dans votre cas, vous pouvez faire une astuce en utilisant linear-gradient comme ça :

background-image: url('images/checked.png'), linear-gradient(to right, #6DB3F2, #6DB3F2);

Le premier élément (image) du paramètre sera placé en haut. Le deuxième élément (couleur de fond) sera placé en dessous du premier. Vous pouvez également définir d'autres propriétés individuellement. Par exemple, pour définir la taille et la position de l'image.

background-size: 30px 30px;
background-position: bottom right;
background-repeat: no-repeat;

L'avantage de cette méthode est que vous pouvez l'appliquer facilement à d'autres cas, par exemple, si vous voulez que la couleur bleue recouvre l'image avec une certaine opacité.

background-image: linear-gradient(to right, rgba(109, 179, 242, .6), rgba(109, 179, 242, .6)), url('images/checked.png');
background-size: cover, contain;
background-position: center, right bottom;
background-repeat: no-repeat, no-repeat;

Les paramètres des propriétés individuelles sont définis respectivement. Comme l'image est placée sous la superposition de couleurs, ses paramètres de propriété sont également placés après les paramètres de la superposition de couleurs.

Answer 5

Vous pouvez également utiliser une petite astuce pour utiliser l'image et la couleur à la fois comme ceci :-.

body {
     background:#000 url('images/checked.png');
 }