IT-TechCZ s.r.o. | Cloud, VoIP ústředny, vývoj webů a informačních systémů, elektronických systémů, IT poradenství
Zobrazují se odpovědi 1 až 11 z 11

Úprava .png obrázku pomocí CSS

  1. 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/ze...line5-w380.png

    Díky

  2. Co se právě děje na Webtrhu?
    LVlorf3us nabízí: Logo na míru | Tomáš Vachuda
    Droserak poptává: Webdesigner e-shop - spěchá
    Facestar poptává: Redakce online magazínu
  3. 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.

  4. 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í.

  5. 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...

  6. Citace Původně odeslal Martin Poláček Zobrazit příspěvek
    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.

  7. Citace Původně odeslal infovia Zobrazit příspěvek
    Odpovedal si si sam.
    Tak mně nejde tak o graf jako o jeho barvy...

  8. Citace Původně odeslal Martin Poláček Zobrazit příspěvek
    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.

  9. Citace Původně odeslal infovia Zobrazit příspěvek
    Neda sa, da ale iba nejakym softikom, gimp, photoshop, atd... Inak nie.
    Škoda... Každý den asi měnit ten graf nebudu :D

  10. 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 ;-)

    Kód:
    <!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>

  11. 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.

    Citace Původně odeslal zezmen Zobrazit příspěvek
    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 ;-)

    Kód:
    <!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>

  12. 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
    Kód:
    .graf { background: red } 
    <img class="graf" src="http://graf.kurzy.cz/graf-komodit/komodity-derivaty-online.php?c=6&k=43&daynum=5&w=380&curr=CZKD&unit=&lv=1">
    Když bude blbnout průhlednost, tak obrázek nasadit do divu který bude mít barvu podkladu jakou chcete, popř. použít RGBA.

Hostujeme u Server powered by TELE3