CSS: image de fond sur 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. Donc 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 avant. Ce travail très 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.CSS: image de fond sur couleur de fond

Je définis 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 est au-dessus de l'image, donc vous ne pouvez pas voir le signe.

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

Source

2011-11-19 mkn

185

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 spécifier en une seule ligne:

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

Source

2011-11-19 16:05:37 dodger

La 1ère méthode ne fonctionne pas pour moi. La 2ème méthode sténographique fonctionne parfaitement. –

Le deuxième a travaillé pour moi aussi. Merci Steve. – starkeen

Le premier n'a pas fonctionné pour moi. La seconde a fait. – felwithe

problème vraiment intéressant, havre de paix 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>

Source

2011-11-19 16:07:04

-8

body 
{ 
background-image:url('image/img2.jpg'); 
margin: 0px; 
padding: 0px; 
}

Source

2013-08-13 11:02:24

Pour moi, cette solution ne fonctionne pas:

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

Mais au lieu, il a travaillé 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%; 
}

Source

2014-07-24 21:57:00

Merci pour le code Francisc !! Comme il le dit, rejoindre la couleur de fond et l'image n'a pas résolu le problème pour moi aussi. Avec cette aide et de petits changements sur mon code, j'ai réussi à résoudre le problème. – Mikel

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

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

Source

2014-08-16 20:50:11

-2

<li style="background-color: #ffffff;"><a href="/<%=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 échantillon Boîte Center Image et couleur de fond

1.Premièrement clearpixel fix zone d'image Zone de l'image du centre 2.Style 3.li arrière-plan ou style de couleur div

Source

2014-12-27 07:03:34 alpc

CSS en ligne n'est pas approprié s'il existe une autre option raisonnable. – Smittles

Basé sur MDN Web Docs vous pouvez définir plusieurs fond usi ng raccourci background propriété ou 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) dans le paramètre sera mis sur le dessus. Le deuxième élément (arrière-plan de couleur) 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;

avantage de cette méthode est que vous pouvez mettre en œuvre pour d'autres cas facilement, par exemple, vous voulez faire de la couleur bleue superposant 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 respectivement définis. É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.

Source

2017-12-24 21:16:43 lukibsubekti

Et si vous voulez 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");

Source

2018-01-15 17:12:53

CSS: image de fond sur couleur de fond

Répondre

Questions connexes