Peittokuvat missä tahansa HTML / verkkosivustossa pikselikohtaisessa vertailussa [Chrome]

click fraud protection

PerfectPixel, Chrome-laajennus, antaa verkkokehittäjille ja suunnittelijoille helpon peittää puoliläpinäkyvän kuvan kehitetyn HTML-verkkosivuston päälle. Siirtämällä kuvaa verkkosivulla, kehittäjät voivat nähdä visuaalisesti pikselien eron. Laajennuksessa on myös opasiteettivaihtoehto, jonka avulla voit tarkastella sekä peittokuvaa että kehitettyä HTML-koodia. Kun siirrät kuvaa ympäri, koordinaatit päivittyvät automaattisesti PerfectPixel-ponnahdusvalikossa, jonka web-kehittäjät voivat sitten kopioida ja käyttää.

Kun olet asentanut laajennuksen, napsauta työkalurivin painiketta ja ponnahdusikkuna tulee näkyviin verkkosivullesi. Klikkaus Lisää uusi kerros ja valitse tiedosto paikallisesta järjestelmästäsi. Tämä kuva lisätään heti kerroksena verkkosivulle. Sinä pystyt Näytä piilota kuvia ja valita myös erilaisia. Siirrä kuvaa ympäri testataksesi sitä eri kohdissa, ja koordinaatit päivittyvät automaattisesti ponnahdusikkunassa. Voit lisätä niin monta kuvaa kuin haluat ja valita tiettyjä napsauttamalla niitä. Kun kuva on oikein sijoitettu, voit käyttää päivitettyjä koordinaatteja kuvan sijoittamiseen CSS: n kautta. Kehittäjä on maininnut useita overlay-tuki; testauksemme tuotti kuitenkin kyvyttömyyden lisätä useita kerroksia.

instagram viewer

PerfectPixel (2)

PerfectPixel vaihtoehdot anna sinun ottaa käyttöön Tallennusyhteensopivuustila, jonka avulla voidaan korjata yhteensopivuusongelmia kuvien lähettämisessä. Yksi yhteensopivuustilan käytön rajoitus on kuitenkin, että tiedostokoko on rajoitettu enintään 1,5 Mt. Voit myös ottaa käyttöön Debug-tilassa ja Pikanäppäimiä.

vaihtoehtoja

Testauksemme kuitenkin osoitti, että vaikka voit lisätä useita kerroksia, voit tarkastella vain yhtä kerrosta kerrallaan tietyllä sivulla. Tämä on valitettava rajoitus, ja kehittäjän tulisi harkita sen muuttamista, jotta useita kerroksia voidaan katsella kerralla. Lukitse-painike tallentaa lisäämäsi kuvakerroksen sijainnin ja vaikka poistut laajennuksesta (napsauta sen painike uudelleen niin, että paneeli katoaa), se muistaa näiden kuvien sijainnin seuraavan avautumisen yhteydessä se.

PerfectPixel-laajennus on varsin kätevä työkalu verkkokehittäjille ja suunnittelijoille, ja se on saatavana alla olevassa Chrome Web Store -linkissä.

Asenna PerfectPixel Google Chromeen

watch instagram story