SORU
14 EYLÜL 2011, ÇARŞAMBA


PNG renk CSS ile resim değiştirme?

Saydam bir PNG beyaz basit bir şekil gösteren belirli CSS ile bir şekilde bu rengi değiştirmek mümkün müdür? Kaplama bir tür ya da ne değildir?

CEVAP
5 Ocak 2014, Pazar


-webkit-filter filterfiltreler kullanabilirsiniz: Filtreler tarayıcılar için çok yeni ve çok modern tarayıcılarda destekler. Gri tonlamalı bir görüntüyü değiştirmek, sepya ve çok daha fazla (örneğe bak).

Şimdi filtreleri ile bir PNG dosyası rengini değiştirebilirsiniz.

body {
    background-color:#03030a;
    min-width: 800px;
    min-height: 400px
}
img {
    width:20%;
    float:left; 
     margin:0;
}
/*Filter styles*/
.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%);}
<!--- img src http://upload.wikimedia.org/wikipedia/commons/thumb/e/ec/Mona_Lisa,_by_Leonardo_da_Vinci,_from_C2RMF_retouched.jpg/500px-Mona_Lisa,_by_Leonardo_da_Vinci,_from_C2RMF_retouched.jpg -->
<img alt="Mona Lisa" src="http://i.stack.imgur.com/OyP0g.jpg" title="original">
<img alt="Mona Lisa" src="http://i.stack.imgur.com/OyP0g.jpg" title="saturate" class="saturate">
<img alt="Mona Lisa" src="http://i.stack.imgur.com/OyP0g.jpg" title="grayscale" class="grayscale">
<img alt="Mona Lisa" src="http://i.stack.imgur.com/OyP0g.jpg" title="contrast" class="contrast">
<img alt="Mona Lisa" src="http://i.stack.imgur.com/OyP0g.jpg" title="brightness" class="brightness">
<img alt="Mona Lisa" src="http://i.stack.imgur.com/OyP0g.jpg" title="blur" class="blur">
<img alt="Mona Lisa" src="http://i.stack.imgur.com/OyP0g.jpg" title="invert" class="invert">
<img alt="Mona Lisa" src="http://i.stack.imgur.com/OyP0g.jpg" title="sepia" class="sepia">
<img alt="Mona Lisa" src="http://i.stack.imgur.com/OyP0g.jpg" title="huerotate" class="huerotate">
<img alt="Mona Lisa" src="http://i.stack.imgur.com/OyP0g.jpg" title="opacity" class="rss opacity">

Source

Bunu Paylaş:
  • Google+
  • E-Posta
Etiketler:

YORUMLAR

SPONSOR VİDEO

Rastgele Yazarlar

  • Michael Neal

    Michael Neal

    2 Mayıs 2009
  • movies95

    movies95

    27 Kasım 2006
  • Valdorsha

    Valdorsha

    8 Mayıs 2006