CSS: image de fond sur la couleur de fond

169

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

Donc si l'utilisateur voit par exemple 10 panneaux et 4 d'entre eux ont 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 maintenant que je ne peux pas afficher le petit panneau et rendre le panneau bleu en même temps.

J'ai mis le panneau en bleu avec le css background: #6DB3F2;et l'image d'arrière-plan avec background-image: url('images/checked.png'). Mais il semble que la couleur d'arrière-plan soit au-dessus de l'image, vous ne pouvez donc pas voir le signe.

Est-il donc possible de définir z-indexes pour la couleur de fond et l'image de fond?

css background background-image background-color mkn
la source

Réponses:

290

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

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

Ou, vous pouvez utiliser le raccourci d'arrière-plan et tout spécifier sur une seule ligne:

background: url('images/checked.png'), #6DB3F2;
dodger
la source
7
La 1ère méthode n'a pas fonctionné pour moi. La deuxième méthode de sténographie fonctionne parfaitement.
Steve Breese
1
Valeur de style non sécurisée
Nexeuz
@Nexeuz pourquoi considérez-vous cette syntaxe de style comme non sécurisée Nexeuz?
Webwoman
31

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

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

Mais au lieu de cela, cela 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%;
}
Francisc Aknai
la source
2
Merci pour le code Francisc !! Comme il le dit, joindre la couleur et l'image d'arrière-plan n'a pas non plus résolu le problème pour moi. Avec cette aide et de petits changements sur mon code, j'ai réussi à résoudre le problème.
Mikel
17

Et si vous souhaitez générer une ombre noire en arrière-plan, vous pouvez utiliser les éléments suivants:

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

Basé sur MDN Web Docs, vous pouvez définir plusieurs arrière-plans à l'aide d'une backgroundpropriété raccourcie ou de propriétés individuelles à l'exception de background-color. Dans votre cas, vous pouvez faire une astuce en utilisant linear-gradientcomme ceci:

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é sous le 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'implémenter facilement dans d'autres cas, par exemple, vous voulez que la couleur bleue superpose 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 de propriété individuels sont définis respectivement. Étant donné que 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 superposition de couleurs.

Luki B. Subekti
la source
2

problème vraiment intéressant, je ne l'ai pas encore vu. ce code fonctionne très bien pour moi. testé en chrome et IE9

<html>
<head>
<style>
body{
    background-image: url('img.jpg');
    background-color: #6DB3F2;
}
</style>
</head>
<body>
</body>
</html>
Ramzi Khahil
la source
2

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

body {
     background:#000 url('images/checked.png');
 }
Kesar Sisodiya
la source
1

Cela fonctionne réellement pour moi:

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

Vous pouvez également déposer une ombre solide et définir l'image d'arrière-plan:

background-image: url('images/checked.png');
box-shadow: inset 0 0 100% #6DB3F2;

Si la première option ne fonctionne pas pour une raison quelconque et que vous ne souhaitez pas utiliser l'ombre de la boîte, vous pouvez toujours utiliser un pseudo élément pour l'image sans HTML supplémentaire:

.btn{
    position: relative;
    background-color: #6DB3F2;
}
.btn:before{
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    position:absolute;
    top:0;
    left:0;
    background-image: url('images/checked.png');
}
Fernán García de Zúñiga
la source
0

Voici comment j'ai stylisé mes boutons colorés avec une icône en arrière-plan

J'ai utilisé la propriété "background-color" pour la couleur et la propriété "background" pour l'image.

  <style>
    .btn {
      display: inline-block;
      line-height: 1em;
      padding: .1em .3em .15em 2em
      border-radius: .2em;
      border: 1px solid #d8d8d8;

      background-color: #cccccc;
    }

    .thumb-up {
      background: url('/icons/thumb-up.png') no-repeat 3px center;
    }

    .thumb-down {
      background: url('/icons/thumb-down.png') no-repeat 3px center;
    }
  </style>

  <span class="btn thumb-up">Thumb up</span>
  <span class="btn thumb-down">Thumb down</span>
Da Beginer
la source
-2

<li style="background-color: #ffffff;"><a href="https://stackoverflow.com/<%=logo_marka_url%>"><img border="0" style="border-radius:5px;background: url(images/picture.jpg') 50% 50% no-repeat;width:150px;height:80px;" src="images/clearpixel.gif"/></a></li>

Autre image du centre de la boîte d'échantillons et couleur d'arrière-plan

1. première zone d'image fixe clearpixel 2. boîte de zone d'image centrale de style 3.li arrière-plan ou style de couleur div

alpc
la source
2
Le CSS en ligne n'est pas approprié s'il existe une autre option raisonnable.
Jon Mitten
-10 
body 
{
background-image:url('image/img2.jpg');
margin: 0px;
 padding: 0px;
}
Vikash Pathak
la source