Úprava .png obrázku pomocí CSS

19. 7. 2017 16:19:11

Ahoj,

potřeboval bych poradit jak upravit .png obrázek pomocí CSS popřípadě nějakého JavaScriptu. Obrázek (graf) se mi každý den aktualizuje a mně se nehodí jeho bílé pozadí, šlo by ho nějak změnit na potřebnou barvu nebo úplně vymazat?

http://data.fin.cz/komodity/grafy/zemni_plyn-graf-cena-online5-w380.png

Díky

19. 7. 2017 16:19:11

https://webtrh.cz/diskuse/uprava-png-obrazku-pomoci-css/#reply1290849

Tomáš Vachuda

(22 hodnocení)

19. 7. 2017 16:39:08

Ahoj, jak se aktualizuje? To ho generuje nějaký skript? Na mě to působí jako regulérní graf vyexportovanej z nějaké aplikace. Tak si v ní jednoduše nastavíš PNG s průhledným pozadím a je to. Dodatečně odmazat barevné pozadí půjde těžko, jelikož kvůli antialiasingu (tzn. prolínání hran objektů / čar / písma do pozadí) nepůjde moc dobře to bílé pozadí vybrat a odmaskovat.. to by pak kolem všeho zůstaly bílé "zuby". Takže to chce vyřešit už na začátku procesu při exportování.

19. 7. 2017 16:39:08

https://webtrh.cz/diskuse/uprava-png-obrazku-pomoci-css/#reply1290847

Smazaný účet KvotlhHqXE

(39 hodnocení)

19. 7. 2017 16:39:08

To mas png, alebo je to nejaky iframe, ci script?

Pozadie obrazku nezmenis ak ho denne odniekial stahujes. Jedine ak by mal transparentne pozadie, co asi nema.

19. 7. 2017 16:39:08

https://webtrh.cz/diskuse/uprava-png-obrazku-pomoci-css/#reply1290848

Martin Poláček

(23 hodnocení)

19. 7. 2017 16:42:19

Ano je to png. Na stránce není k dispozi vybrat si jaké chci pozadí nebo tak. Prostě jen zvolím velikost grafu a nějaký script vygeneruje html kód. Bohůžel to chci mít na tmavém pozadí a tohle se úplně nehodí. Žádný API stránky jsem přímo nenašel, asi nechtějí, aby si to někdo generoval mimo jejich script...

19. 7. 2017 16:42:19

https://webtrh.cz/diskuse/uprava-png-obrazku-pomoci-css/#reply1290846

Smazaný účet KvotlhHqXE

(39 hodnocení)

19. 7. 2017 16:42:54

Napsal Martin Poláček;1399550
Ano je to png. Na stránce není k dispozi vybrat si jaké chci pozadí nebo tak. Prostě jen zvolím velikost grafu a nějaký script vygeneruje html kód. Bohůžel to chci mít na tmavém pozadí a tohle se úplně nehodí. Žádný API stránky jsem přímo nenašel, asi nechtějí, aby si to někdo generoval mimo jejich script...

Odpovedal si si sam.

19. 7. 2017 16:42:54

https://webtrh.cz/diskuse/uprava-png-obrazku-pomoci-css/#reply1290845

Martin Poláček

(23 hodnocení)

19. 7. 2017 16:44:19

Napsal infovia;1399551
Odpovedal si si sam.

Tak mně nejde tak o graf jako o jeho barvy...

19. 7. 2017 16:44:19

https://webtrh.cz/diskuse/uprava-png-obrazku-pomoci-css/#reply1290844

Smazaný účet KvotlhHqXE

(39 hodnocení)

19. 7. 2017 16:46:54

Napsal Martin Poláček;1399552
Tak mně nejde tak o graf jako o jeho barvy...

Neda sa, da ale iba nejakym softikom, gimp, photoshop, atd... Inak nie. Je to obrazok ktory berzies z ineho webu a ten ma biele pozadie. Bez softweru to nezmenis.

19. 7. 2017 16:46:54

https://webtrh.cz/diskuse/uprava-png-obrazku-pomoci-css/#reply1290843

Martin Poláček

(23 hodnocení)

19. 7. 2017 16:47:22

Napsal infovia;1399554
Neda sa, da ale iba nejakym softikom, gimp, photoshop, atd... Inak nie.

Škoda... Každý den asi měnit ten graf nebudu :D

19. 7. 2017 16:47:22

https://webtrh.cz/diskuse/uprava-png-obrazku-pomoci-css/#reply1290842

zezmen

(39 hodnocení)

19. 7. 2017 19:35:53

Všechno jde když se zapne mozek.

Přikládám ukázku komplet HTML s vloženým CSS stylem.

Předem děkuji za kladné hodnocení příspěvku ;-)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8">
  <title>Ukázka barvení obrázku</title>
      <style type="text/css">
        img {
            width:20%;
            float:left; 
            margin:0;
            }
        .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%);}
      </style>
  </head>
  <body>
    <img alt="obrazek" src="http://data.fin.cz/komodity/grafy/zemni_plyn-graf-cena-online5-w380.png" title="original">
    <img alt="obrazek" src="http://data.fin.cz/komodity/grafy/zemni_plyn-graf-cena-online5-w380.png" title="saturate" class="saturate">
    <img alt="obrazek" src="http://data.fin.cz/komodity/grafy/zemni_plyn-graf-cena-online5-w380.png" title="grayscale" class="grayscale">
    <img alt="obrazek" src="http://data.fin.cz/komodity/grafy/zemni_plyn-graf-cena-online5-w380.png" title="contrast" class="contrast">
    <img alt="obrazek" src="http://data.fin.cz/komodity/grafy/zemni_plyn-graf-cena-online5-w380.png" title="brightness" class="brightness">
    <img alt="obrazek" src="http://data.fin.cz/komodity/grafy/zemni_plyn-graf-cena-online5-w380.png" title="blur" class="blur">
    <img alt="obrazek" src="http://data.fin.cz/komodity/grafy/zemni_plyn-graf-cena-online5-w380.png" title="invert" class="invert">
    <img alt="obrazek" src="http://data.fin.cz/komodity/grafy/zemni_plyn-graf-cena-online5-w380.png" title="sepia" class="sepia">
    <img alt="obrazek" src="http://data.fin.cz/komodity/grafy/zemni_plyn-graf-cena-online5-w380.png" title="huerotate" class="huerotate">
    <img alt="obrazek" src="http://data.fin.cz/komodity/grafy/zemni_plyn-graf-cena-online5-w380.png" title="opacity" class="rss opacity">
  </body>
</html>

19. 7. 2017 19:35:53

https://webtrh.cz/diskuse/uprava-png-obrazku-pomoci-css/#reply1290841

Martin Poláček

(23 hodnocení)

19. 7. 2017 19:42:19

Super, ale bohužel to stále neřeší můj problém. Potřeboval jsem změnit barvu pozadí na jakoukoliv, což ani jedna z možností nedokáže.

Napsal zezmen;1399588
Všechno jde když se zapne mozek.
Přikládám ukázku komplet HTML s vloženým CSS stylem.
Předem děkuji za kladné hodnocení příspěvku ;-)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <title>Ukázka barvení obrázku</title> <style type="text/css"> img { width:20%; float:left; margin:0; } .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%);} </style> </head> <body> <img alt="obrazek" src="http://data.fin.cz/komodity/grafy/zemni_plyn-graf-cena-online5-w380.png" title="original"> <img alt="obrazek" src="http://data.fin.cz/komodity/grafy/zemni_plyn-graf-cena-online5-w380.png" title="saturate" class="saturate"> <img alt="obrazek" src="http://data.fin.cz/komodity/grafy/zemni_plyn-graf-cena-online5-w380.png" title="grayscale" class="grayscale"> <img alt="obrazek" src="http://data.fin.cz/komodity/grafy/zemni_plyn-graf-cena-online5-w380.png" title="contrast" class="contrast"> <img alt="obrazek" src="http://data.fin.cz/komodity/grafy/zemni_plyn-graf-cena-online5-w380.png" title="brightness" class="brightness"> <img alt="obrazek" src="http://data.fin.cz/komodity/grafy/zemni_plyn-graf-cena-online5-w380.png" title="blur" class="blur"> <img alt="obrazek" src="http://data.fin.cz/komodity/grafy/zemni_plyn-graf-cena-online5-w380.png" title="invert" class="invert"> <img alt="obrazek" src="http://data.fin.cz/komodity/grafy/zemni_plyn-graf-cena-online5-w380.png" title="sepia" class="sepia"> <img alt="obrazek" src="http://data.fin.cz/komodity/grafy/zemni_plyn-graf-cena-online5-w380.png" title="huerotate" class="huerotate"> <img alt="obrazek" src="http://data.fin.cz/komodity/grafy/zemni_plyn-graf-cena-online5-w380.png" title="opacity" class="rss opacity"> </body> </html>

19. 7. 2017 19:42:19

https://webtrh.cz/diskuse/uprava-png-obrazku-pomoci-css/#reply1290840

zezmen

(39 hodnocení)

19. 7. 2017 22:21:21

Teď jsem koukal na stránky kurzy.cz a u všech grafů je použito průhledné pozadí u grafů !!

Tak kde berete grafy bez průhlednosti ?

Obarvení průhledného pozadí lze jednoduše.

Stačí na místo kde bude graf jej načíst z originálu a pak přiřadit css styl.

Např. CSS styl

Když bude blbnout průhlednost, tak obrázek nasadit do divu který bude mít barvu podkladu jakou chcete, popř. použít RGBA.

19. 7. 2017 22:21:21