CSS : image de fond sur la couleur de fond

Question

CSS : image de fond sur la couleur de fond

Demandé el 19 de Novembre, 2011: Quand la question a-t-elle été
571516 affichage: Nombre de visites la question a
5 Réponses: Nombre de réponses aux questions
Résolu: Situation réelle de la 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 ?

Demandé el 19 de Novembre, 2011 par mkn

Answer 1

5 Réponses

Answer 2

2voto

Kahil Points 1362

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

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

Répondu el 19 de Novembre, 2011 par Kahil (1362 Points )

Answer 3

2voto

Fernán García de Zúñiga Points 129

En fait, ça marche pour moi :

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

Vous pouvez également déposer une ombre solide et définir l'image de fond :

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 voulez pas utiliser l'ombre portée, vous pouvez toujours utiliser un pseudo-élément pour l'image sans aucun 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');
}

Répondu el 16 de Février, 2020 par Fernán García de Zúñiga (129 Points )

Answer 4

2voto

Alex Chaliy Points 84

La syntaxe suivante peut également être utilisée.

background: <background-color> 
            url('../assets/icons/my-icon.svg')
            <background-position-x background-position-y>
            <background-repeat>;

Il vous permet de combiner background-color , background-image , background-position y background-repeat propriétés.

Exemple

background: #696969 url('../assets/icons/my-icon.svg') center center no-repeat;

Répondu el 10 de Novembre, 2020 par Alex Chaliy (84 Points )

Answer 5

0voto

Da Beginer Points 33

Voici comment j'ai conçu 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>

Répondu el 23 de Janvier, 2019 par Da Beginer (33 Points )

Answer 6

0voto

Nux Points 1053

En supposant que vous voulez une icône à droite (ou à gauche), cela devrait fonctionner au mieux :

.show-hide-button::after {
    content:"";
    background-repeat: no-repeat;
    background-size: contain;
    display: inline-block;
    background-size: 1em;
    width: 1em;
    height: 1em;
    background-position: 0 2px;
    margin-left: .5em;
}
.show-hide-button.shown::after {
    background-image: url(img/eye.svg);
}

Vous pouvez également faire background-size: contain; mais cela devrait rester le même. background-position dépendra de votre image.

Vous pouvez alors facilement créer un état alternatif au survol :

.show-hide-button.shown:hover::after {
    background-image: url(img/eye-no.svg);
}

Répondu el 28 de Novembre, 2020 par Nux (1053 Points )

CSS : image de fond sur la couleur de fond

Réponses

La syntaxe suivante peut également être utilisée.

Exemple

Questions en vedette

Top Tags

Prograide.com

Powered by:

CSS : image de fond sur la couleur de fond

Réponses

La syntaxe suivante peut également être utilisée.

Exemple

Questions en vedette

Top Tags

Dans notre réseau

Prograide.com

Powered by: