Est-il réellement possible d'appliquer une couleur de fond sur une image PNG transparente en CSS? Voici un exemple:Couleur d'arrière-plan sur une image PNG transparente dans CSS
Avec CSS, transformant cette image
cela avec un code CSS comme background-color: rgba(0,0,300,.5)
Tout en pleine CSS (et HTML bien sûr) ?
Merci.
Vous ne pouvez pas obtenir cet effet en utilisant background-color, car une couleur d'arrière-plan transparent appliqué à un élément de recouvrement sera toujours effectuer les parties transparentes de l'image PNG aussi.
Vous devez le CSS filtershue-rotate() (faites tourner la couleur de l'image au violet) et brightness() (assombrir l'image):
img {
filter: hue-rotate(230deg) brightness(60%);
}<img src="https://i.stack.imgur.com/nPnsV.png" />Voir pour more information about CSS filters MDN. Il y a aussi un article on CSS Tricks utile pour les filtres CSS.
Merci. Il n'y a donc pas de moyen de placer une image de faible transparence sur une image au lieu de changer complètement la couleur de l'image (avec hue-rotate) dans une autre couleur (comme si vous utilisiez 'background-color: rgba (0,300,0, .15) '? – Wyvh
Vous pouvez le faire, mais même si vous appliquez cet effet à un élément sus-jacent, vous aurez toujours aussi des effets sur les parties transparentes de l'image ... – andreas
Eh bien, c'est triste. mais vous ne pouvez pas non plus appliquer une couleur de fond:/Marquer comme la meilleure réponse – Wyvh
Utiliser CSS Filtres
d'un article sur filters par Chris Coyier:
filtres CSS sont un outil puissant que les auteurs peuvent utiliser pour atteindre divers effets visuels (un peu comme les filtres Photoshop pour le navigateur ). La propriété CSS
filterpermet d'accéder à des effets tels que flou ou changement de couleur sur le rendu d'un élément avant que l'élément ne s'affiche.
- blur()
- luminosité()
- contraste()
- drop-shadow()
- en niveaux de gris()
- teinte-rotation()
- inverti()
- opacité()
- saturer()
- sépia()
échantillons de filtres (basé sur W3S) :
<!DOCTYPE html>
<html>
<head>
<style>
img {
width: 33%;
height: auto;
float: left;
}
.blur {-webkit-filter: blur(4px);filter: blur(4px);}
.brightness {-webkit-filter: brightness(0.30);filter: brightness(0.30);}
.contrast {-webkit-filter: contrast(180%);filter: contrast(180%);}
.grayscale {-webkit-filter: grayscale(100%);filter: grayscale(100%);}
.huerotate {-webkit-filter: hue-rotate(180deg);filter: hue-rotate(180deg);}
.invert {-webkit-filter: invert(100%);filter: invert(100%);}
.opacity {-webkit-filter: opacity(50%);filter: opacity(50%);}
.saturate {-webkit-filter: saturate(7); filter: saturate(7);}
.sepia {-webkit-filter: sepia(100%);filter: sepia(100%);}
.shadow {-webkit-filter: drop-shadow(8px 8px 10px green);filter: drop-shadow(8px 8px 10px green);}
</style>
</head>
<body>
<p><strong>Note:</strong> The filter property is not supported in Internet Explorer, Edge 12, or Safari 5.1 and earlier.</p>
<img src="https://i.stack.imgur.com/nPnsV.png" width="300" height="300">
<img class="blur" src="https://i.stack.imgur.com/nPnsV.png" width="300" height="300">
<img class="brightness" src="https://i.stack.imgur.com/nPnsV.png" width="300" height="300">
<img class="contrast" src="https://i.stack.imgur.com/nPnsV.png" width="300" height="300">
<img class="grayscale" src="https://i.stack.imgur.com/nPnsV.png" width="300" height="300">
<img class="huerotate" src="https://i.stack.imgur.com/nPnsV.png" width="300" height="300">
<img class="invert" src="https://i.stack.imgur.com/nPnsV.png" width="300" height="300">
<img class="opacity" src="https://i.stack.imgur.com/nPnsV.png" width="300" height="300">
<img class="saturate" src="https://i.stack.imgur.com/nPnsV.png" width="300" height="300">
<img class="sepia" src="https://i.stack.imgur.com/nPnsV.png" width="300" height="300">
<img class="shadow" src="https://i.stack.imgur.com/nPnsV.png" width="300" height="300">
</body>
</html>En effet Hover:
img:hover {
filter: hue-rotate(250deg);
}<img src="https://i.stack.imgur.com/nPnsV.png" />Vous ne pouvez pas changer la couleur de l'image de CSS que vous le souhaitez. Mais vous pouvez le faire dans une certaine mesure en utilisant des filtres.
.saturate {-webkit-filter: saturate(3); filter: saturate(3);}
.grayscale {-webkit-filter: grayscale(100%); filter: grayscale(100%);}
.contrast {-webkit-filter: contrast(160%); filter: contrast(160%);}
.brightness {-webkit-filter: brightness(0.25); filter: brightness(0.25);}
.blur {-webkit-filter: blur(3px); filter: blur(3px);}
.invert {-webkit-filter: invert(100%); filter: invert(100%);}
.sepia {-webkit-filter: sepia(100%); filter: sepia(100%);}
.huerotate {-webkit-filter: hue-rotate(180deg); filter: hue-rotate(180deg);}
.rss.opacity {-webkit-filter: opacity(50%); filter: opacity(50%);}
S'il vous plaît vérifier ces réponses stackoverflow. Change color of PNG image via CSS?
Ne pas utiliser la réponse copiée @heshan de https://stackoverflow.com/questions/7415872/changer-color-of-png-image-via-css –
lire son commentaire correctement @AnmolSandal "Veuillez vérifier les réponses stackoverflow suivantes: Changer la couleur de l'image PNG via CSS?" – lpradhap
@AnmolSandal s'il vous plaît vérifier "S'il vous plaît vérifier ces réponses stackoverflow.Changer la couleur de l'image PNG via CSS?". vous pouvez voir la référence. Alors s'il vous plaît vérifier le commentaire complet avant de commenter. –
Oui, vous pouvez le faire avec l'aide de filtres CSS.
« La propriété filtre CSS donne accès à des effets tels que le flou ou la couleur décalage sur le rendu d'un élément avant l'élément est affiché. Les filtres sont couramment utilisés pour ajuster le rendu d'une image, un fond , ou une frontière." - Chris Coyier
Demandez regard sur ces sites:
Non, il est impossible de changer les couleurs comme ça. Voulez-vous que l'image soit modifiée en vol stationnaire ou quoi? –
@AnmolSandal c'est effectivement possible avec les filtres CSS. – andreas
Oui, je l'ai cherché et j'ai eu une solution. Bravo à votre question, appris une nouvelle substance –