web-dev-qa-db-fra.com

CSS: image de fond sur la couleur de fond

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 (.png image) à 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 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 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 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?

cssbackgroundbackground-imagebackground-color
120
mkn

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

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

Vous pouvez également utiliser le raccourci d’arrière-plan et le spécifier en une seule ligne:

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

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%;
}
27
Francisc Aknai

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

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

problème vraiment intéressant, je ne l’ai pas encore vu. ce code fonctionne 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>
2
Ramzi Kahil

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

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

En fonction de MDN Web Docs , vous pouvez définir plusieurs arrière-plans à l'aide de la propriété abrégée background ou de propriétés individuelles, à l'exception de background-color. Dans votre cas, vous pouvez faire un tour en utilisant linear-gradient comme 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 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 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. 

0
Luki B. Subekti

Voici comment je stylise 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>
0
Da Beginer