Dado um PNG transparente exibindo uma forma simples em branco, é possível alterar de alguma forma a cor disso por meio de CSS? Algum tipo de sobreposição ou o que não?
Dado um PNG transparente exibindo uma forma simples em branco, é possível alterar de alguma forma a cor disso por meio de CSS? Algum tipo de sobreposição ou o que não?
Respostas:
Você pode usar filtros com -webkit-filter
e filter
: Os filtros são relativamente novos para os navegadores, mas são suportados em mais de 90% dos navegadores, de acordo com a seguinte tabela CanIUse: https://caniuse.com/#feat=css-filters
Você pode alterar uma imagem para escala de cinza, sépia e muito mais (veja o exemplo).
Agora você pode alterar a cor de um arquivo PNG com filtros.
body {
background-color:#03030a;
min-width: 800px;
min-height: 400px
}
img {
width:20%;
float:left;
margin:0;
}
/*Filter styles*/
.saturate { filter: saturate(3); }
.grayscale { filter: grayscale(100%); }
.contrast { filter: contrast(160%); }
.brightness { filter: brightness(0.25); }
.blur { filter: blur(3px); }
.invert { filter: invert(100%); }
.sepia { filter: sepia(100%); }
.huerotate { filter: hue-rotate(180deg); }
.rss.opacity { filter: opacity(50%); }
<!--- img src http://upload.wikimedia.org/wikipedia/commons/thumb/e/ec/Mona_Lisa%2C_by_Leonardo_da_Vinci%2C_from_C2RMF_retouched.jpg/500px-Mona_Lisa%2C_by_Leonardo_da_Vinci%2C_from_C2RMF_retouched.jpg -->
<img alt="Mona Lisa" src="https://www.pexels.com/photo/photo-of-a-green-leaf-2563743/?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260" title="original">
<img alt="Mona Lisa" src="https://images.pexels.com/photos/40997/mona-lisa-leonardo-da-vinci-la-gioconda-oil-painting-40997.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260" title="saturate" class="saturate">
<img alt="Mona Lisa" src="https://images.pexels.com/photos/40997/mona-lisa-leonardo-da-vinci-la-gioconda-oil-painting-40997.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260" title="grayscale" class="grayscale">
<img alt="Mona Lisa" src="https://images.pexels.com/photos/40997/mona-lisa-leonardo-da-vinci-la-gioconda-oil-painting-40997.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260" title="contrast" class="contrast">
<img alt="Mona Lisa" src="https://images.pexels.com/photos/40997/mona-lisa-leonardo-da-vinci-la-gioconda-oil-painting-40997.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260" title="brightness" class="brightness">
<img alt="Mona Lisa" src="https://images.pexels.com/photos/40997/mona-lisa-leonardo-da-vinci-la-gioconda-oil-painting-40997.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260" title="blur" class="blur">
<img alt="Mona Lisa" src="https://images.pexels.com/photos/40997/mona-lisa-leonardo-da-vinci-la-gioconda-oil-painting-40997.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260" title="invert" class="invert">
<img alt="Mona Lisa" src="https://images.pexels.com/photos/40997/mona-lisa-leonardo-da-vinci-la-gioconda-oil-painting-40997.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260" title="sepia" class="sepia">
<img alt="Mona Lisa" src="https://images.pexels.com/photos/40997/mona-lisa-leonardo-da-vinci-la-gioconda-oil-painting-40997.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260" title="huerotate" class="huerotate">
<img alt="Mona Lisa" src="https://images.pexels.com/photos/40997/mona-lisa-leonardo-da-vinci-la-gioconda-oil-painting-40997.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260" title="opacity" class="rss opacity">
.gifcorrect{ filter: invert(28%) sepia(100%) hue-rotate(-180deg) saturate(3); }
o que significa que você pode ir de preto e transparente ou em tons de cinza com a cor e funciona mesmo em gifs animados
Encontrei este ótimo exemplo de codepen que você insere seu valor de cor hexadecimal e ele retorna o filtro necessário para aplicar essa cor a png
Gerador de filtros CSS para converter de preto para cor hexadecimal alvo
por exemplo, eu precisava do meu png para ter a seguinte cor # 1a9790
então você deve aplicar o seguinte filtro a você png
filter: invert(48%) sepia(13%) saturate(3207%) hue-rotate(130deg) brightness(95%) contrast(80%);
filter: invert(1%) sepia(1%) saturate(1%) hue-rotate(1deg) brightness(1000%) contrast(80%);
Você pode dar uma olhada nas fontes Icon. http://css-tricks.com/examples/IconFont/
Edição: Estou usando Font-Awesome no meu projeto mais recente. Você pode até inicializá-lo. Basta colocar isso no seu <head>
:
<link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css" rel="stylesheet">
<!-- And if you want to support IE7, add this aswell -->
<link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome-ie7.min.css" rel="stylesheet">
E então vá em frente e adicione alguns links de ícones como este:
<a class="icon-thumbs-up"></a>
Aqui está a folha de dicas completa
--editar--
O Font-Awesome usa nomes de classes diferentes na nova versão, provavelmente porque isso reduz drasticamente os arquivos CSS e evita classes css ambíguas. Então agora você deve usar:
<a class="fa fa-thumbs-up"></a>
EDIT 2:
Acabei de descobrir que o github também usa sua própria fonte de ícone: Octicons É gratuito para download. Eles também têm algumas dicas sobre como criar suas próprias fontes de ícones .
Consegui fazer isso usando o filtro SVG. Você pode escrever um filtro que multiplique a cor da imagem de origem pela cor que deseja alterar. No trecho de código abaixo, cor de inundação é a cor para a qual queremos alterar a cor da imagem (que é vermelha nesse caso.) FeComposite diz ao filtro como estamos processando a cor. A fórmula para feComposite com aritmética é (k1 * i1 * i2 + k2 * i1 + k3 * i2 + k4) em que i1 e i2 são cores de entrada para in / in2 de acordo. Portanto, especificar apenas k1 = 1 significa que ele fará apenas i1 * i2, o que significa multiplicar as duas cores de entrada.
Nota: Isso funciona apenas com HTML5, pois está usando SVG embutido. Mas acho que você poderá fazer isso funcionar com um navegador mais antigo colocando o SVG em um arquivo separado. Ainda não tentei essa abordagem.
Aqui está o trecho:
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="60" height="90" style="float:left">
<defs>
<filter id="colorMask1">
<feFlood flood-color="#ff0000" result="flood" />
<feComposite in="SourceGraphic" in2="flood" operator="arithmetic" k1="1" k2="0" k3="0" k4="0" />
</filter>
</defs>
<image width="100%" height="100%" xlink:href="http://i.stack.imgur.com/OyP0g.jpg" filter="url(#colorMask1)" />
</svg>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="60" height="90" style="float:left">
<defs>
<filter id="colorMask2">
<feFlood flood-color="#00ff00" result="flood" />
<feComposite in="SourceGraphic" in2="flood" operator="arithmetic" k1="1" k2="0" k3="0" k4="0" />
</filter>
</defs>
<image width="100%" height="100%" xlink:href="http://i.stack.imgur.com/OyP0g.jpg" filter="url(#colorMask2)" />
</svg>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="60" height="90" style="float:left">
<defs>
<filter id="colorMask3">
<feFlood flood-color="#0000ff" result="flood" />
<feComposite in="SourceGraphic" in2="flood" operator="arithmetic" k1="1" k2="0" k3="0" k4="0" />
</filter>
</defs>
<image width="100%" height="100%" xlink:href="http://i.stack.imgur.com/OyP0g.jpg" filter="url(#colorMask3)" />
</svg>
A tag img possui uma propriedade background como qualquer outra. Se você tiver um PNG branco com uma forma transparente, como um estêncil, poderá fazer o seguinte:
<img src= 'stencil.png' style= 'background-color: red'>
Sim :)
Surfin 'Safari - Blog Archive »Máscaras CSS
O WebKit agora suporta máscaras alfa em CSS. As máscaras permitem sobrepor o conteúdo de uma caixa com um padrão que pode ser usado para eliminar partes dessa caixa na exibição final. Em outras palavras, você pode recortar para formas complexas com base no alfa de uma imagem.
[...]
Introduzimos novas propriedades para fornecer aos designers da Web muito controle sobre essas máscaras e como elas são aplicadas. As novas propriedades são análogas às propriedades de imagem de fundo e de borda que já existem.-webkit-mask (background) -webkit-mask-attachment (background-attachment) -webkit-mask-clip (background-clip) -webkit-mask-origin (background-origin) -webkit-mask-image (background-image) -webkit-mask-repeat (background-repeat) -webkit-mask-composite (background-composite) -webkit-mask-box-image (border-image)
Na maioria dos navegadores , você pode usar filtros:
nos <img>
elementos e nas imagens de fundo de outros elementos
e defina-os estaticamente em seu CSS ou dinamicamente usando JavaScript
Veja as demonstrações abaixo.
<img>
elementosVocê pode aplicar esta técnica a um <img>
elemento:
#original, #changed {
width: 45%;
padding: 2.5%;
float: left;
}
#changed {
-webkit-filter : hue-rotate(180deg);
filter : hue-rotate(180deg);
}
<img id="original" src="http://i.stack.imgur.com/rfar2.jpg" />
<img id="changed" src="http://i.stack.imgur.com/rfar2.jpg" />
Você pode aplicar esta técnica a uma imagem de plano de fundo:
#original, #changed {
background: url('http://i.stack.imgur.com/kaKzj.jpg');
background-size: cover;
width: 30%;
margin: 0 10% 0 10%;
padding-bottom: 28%;
float: left;
}
#changed {
-webkit-filter : hue-rotate(180deg);
filter : hue-rotate(180deg);
}
<div id="original"></div>
<div id="changed"></div>
Você pode usar o JavaScript para definir um filtro em tempo de execução:
var element = document.getElementById("changed");
var filter = 'hue-rotate(120deg) saturate(2.4)';
element.style['-webkit-filter'] = filter;
element.style['filter'] = filter;
#original, #changed {
margin: 0 10%;
width: 30%;
float: left;
background: url('http://i.stack.imgur.com/856IQ.png');
background-size: cover;
padding-bottom: 25%;
}
<div id="original"></div>
<div id="changed"></div>
hue-rotate
não funciona em branco.
Acho que tenho uma solução para isso que é a) exatamente o que você procurava há 5 anos eb) é um pouco mais simples do que as outras opções de código aqui.
Com qualquer png branco (por exemplo, ícone branco em fundo transparente), você pode adicionar um seletor :: after para recolorir.
.icon {
background: url(img/icon.png); /* Your icon */
position: relative; /* Allows an absolute positioned psuedo element */
}
.icon::after{
position: absolute; /* Positions psuedo element relative to .icon */
width: 100%; /* Same dimensions as .icon */
height: 100%;
content: ""; /* Allows psuedo element to show */
background: #EC008C; /* The color you want the icon to change to */
mix-blend-mode: multiply; /* Only apply color on top of white, use screen if icon is black */
}
Veja este código (aplicando a troca de cores ao passar o mouse): http://codepen.io/chrscblls/pen/bwAXZO
A linha mais simples que funcionou para mim:
filter: opacity(0.5) drop-shadow(0 0 0 blue);
Você pode ajustar a opacidade de 0 a 1 para tornar a cor mais clara ou mais escura.
Descobri isso enquanto pesquisava no Google, achei melhor trabalhar para mim ...
HTML
<div class="img"></div>
CSS
.img {
background-color: red;
width: 60px;
height: 60px;
-webkit-mask-image: url('http://i.stack.imgur.com/gZvK4.png');
}
Como exigia uma cor específica, o filtro não funcionava para mim.
Em vez disso, criei uma div, explorando várias imagens de plano de fundo do CSS e a função gradiente linear (que cria a própria imagem). Se você usar o modo de mesclagem de sobreposição, sua imagem real será combinada com a imagem "gradiente" gerada que contém a cor desejada (aqui, # BADA55)
.colored-image {
background-image: linear-gradient(to right, #BADA55, #BADA55), url("https://i.imgur.com/lYXT8R6.png");
background-blend-mode: overlay;
background-size: contain;
width: 200px;
height: 200px;
}
<div class="colored-image"></div>
Respondendo porque estava procurando uma solução para isso.
a caneta na resposta @chrscblls funciona bem se você tem um fundo branco ou preto, mas o meu não. Além disso, as imagens foram geradas com ng-repeat, então eu não poderia ter o URL deles no meu css E você não pode usar :: after nas tags img.
Então, imaginei uma solução e pensei que poderia ajudar as pessoas se elas também tropeçarem aqui.
Então, o que eu fiz é praticamente o mesmo com três diferenças principais:
Para alterá-lo de preto para branco ou branco para preto, a cor do plano de fundo precisa ser branca. Do preto às cores, você pode escolher qualquer cor. Do branco às cores, você precisará escolher a cor oposta à desejada.
.divClass{
position: relative;
width: 100%;
height: 100%;
text-align: left;
}
.divClass:hover::after, .divClass:hover::before{
position: absolute;
width: 100%;
height: 100%;
background: #FFF;
mix-blend-mode: difference;
content: "";
}
Não há necessidade de um conjunto de fontes inteiro, se você precisar apenas de um ícone, além disso, sinto que é mais "limpo" como um elemento individual. Portanto, para esse fim, em HTML5, você pode colocar um SVG diretamente dentro do fluxo do documento. Em seguida, você pode definir uma classe na folha de estilo .CSS e acessar sua cor de plano de fundo com a fill
propriedade
Violino de trabalho: http://jsfiddle.net/qmsj0ez1/
Observe que, no exemplo, eu usei :hover
para ilustrar o comportamento; se você quiser apenas mudar de cor para o estado "normal", remova o pseudoclasse.
Para literalmente mudar a cor, você pode incorporar uma transição CSS com um filtro -webkit-onde, quando algo acontece, você chamaria o -webkit-filtro de sua escolha. Por exemplo:
img {
-webkit-filter:grayscale(0%);
transition: -webkit-filter .3s linear;
}
img:hover
{
-webkit-filter:grayscale(75%);
}
Ao alterar uma imagem de preto para branco ou de branco para preto, o filtro de rotação da tonalidade não funciona, porque preto e branco não são tecnicamente cores. Em vez disso, as alterações de cor preto e branco (de preto para branco ou vice-versa) devem ser feitas com a propriedade de filtro invertido.
.img1 {
filter: invert(100%);
}
body{
background: #333 url(/images/classy_fabric.png);
width: 430px;
margin: 0 auto;
padding: 30px;
}
.preview{
background: #ccc;
width: 415px;
height: 430px;
border: solid 10px #fff;
}
input[type='radio'] {
-webkit-appearance: none;
-moz-appearance: none;
width: 25px;
height: 25px;
margin: 5px 0 5px 5px;
background-size: 225px 70px;
position: relative;
float: left;
display: inline;
top: 0;
border-radius: 3px;
z-index: 99999;
cursor: pointer;
box-shadow: 1px 1px 1px #000;
}
input[type='radio']:hover{
-webkit-filter: opacity(.4);
filter: opacity(.4);
}
.red{
background: red;
}
.red:checked{
background: linear-gradient(brown, red)
}
.green{
background: green;
}
.green:checked{
background: linear-gradient(green, lime);
}
.yellow{
background: yellow;
}
.yellow:checked{
background: linear-gradient(orange, yellow);
}
.purple{
background: purple;
}
.pink{
background: pink;
}
.purple:checked{
background: linear-gradient(purple, violet);
}
.red:checked ~ img{
-webkit-filter: opacity(.5) drop-shadow(0 0 0 red);
filter: opacity(.5) drop-shadow(0 0 0 red);
}
.green:checked ~ img{
-webkit-filter: opacity(.5) drop-shadow(0 0 0 green);
filter: opacity(.5) drop-shadow(0 0 0 green);
}
.yellow:checked ~ img{
-webkit-filter: opacity(.5) drop-shadow(0 0 0 yellow);
filter: opacity(.5) drop-shadow(0 0 0 yellow);
}
.purple:checked ~ img{
-webkit-filter: opacity(.5) drop-shadow(0 0 0 purple);
filter: opacity(.5) drop-shadow(0 0 0 purple);
}
.pink:checked ~ img{
-webkit-filter: opacity(.5) drop-shadow(0 0 0 pink);
filter: opacity(.5) drop-shadow(0 0 0 pink);
}
img{
width: 394px;
height: 375px;
position: relative;
}
.label{
width: 150px;
height: 75px;
position: absolute;
top: 170px;
margin-left: 130px;
}
::selection{
background: #000;
}
<div class="preview">
<input class='red' name='color' type='radio' />
<input class='green' name='color' type='radio' />
<input class='pink' name='color' type='radio' />
<input checked class='yellow' name='color' type='radio' />
<input class='purple' name='color' type='radio' />
<img src="https://i.stack.imgur.com/bd7VJ.png"/>
</div>
background-color
propriedade CSS. Você pode criar partes não transparentes que serão corrigidas e partes transparentes da imagem que serão preenchidas com qualquer cor que você desejar via CSS. É isso que você deseja alcançar?