[Boards: 3 / a / aco / adv / an / asp / b / bant / biz / c / can / cgl / ck / cm / co / cock / d / diy / e / fa / fap / fit / fitlit / g / gd / gif / h / hc / his / hm / hr / i / ic / int / jp / k / lgbt / lit / m / mlp / mlpol / mo / mtv / mu / n / news / o / out / outsoc / p / po / pol / qa / qst / r / r9k / s / s4s / sci / soc / sp / spa / t / tg / toy / trash / trv / tv / u / v / vg / vint / vip / vp / vr / w / wg / wsg / wsr / x / y ] [Search | Click for more| Home]

Transparent PNG in Firefox

This is a blue board which means that it's for everybody (Safe For Work content only). If you see any adult content, please report it.

Thread replies: 25
Thread images: 8

File: png.png (266KB, 500x474px) Image search: [iqdb] [SauceNao] [Google]
png.png
266KB, 500x474px
How can I make transparent PNG files appear like pic related in Firefox?
I used to have a Stylish userstyle for it but it's broken as of Firefox 36.
>>
File: n64.png (364KB, 500x474px) Image search: [iqdb] [SauceNao] [Google]
n64.png
364KB, 500x474px
>>46835507
Original file.
>>
File: 1424912602967.gif (1MB, 300x300px) Image search: [iqdb] [SauceNao] [Google]
1424912602967.gif
1MB, 300x300px
why would you even want that?
>>
I don't get it; are you saying you want all tansparent pngs to have a checkerboard pattern instead of actually showing as transparent? Would that not defeat the purpose of transparency?
>>
Here's the userstyle I used up until Firefox 36 if anyone's interested.

@namespace url(http://www.w3.org/1999/xhtml);
body > img.decoded {
background: none !important;
}

body > img.decoded:hover {
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAIAAAAC64paAAAALElEQVQ4jWP8//8/A25w8OBBPLJMeOQIglHNI0MzC/40ZG9vTyubRzWPDM0AKzgIamYmFXoAAAAASUVORK5CYII=) !important;
}
>>
File: shit.png (380KB, 812x812px) Image search: [iqdb] [SauceNao] [Google]
shit.png
380KB, 812x812px
>>46835524
Because I currently get this useless shit in Firefox 36 so I wouldn't even know if the image had transparency or just a grey background.
>>
>>46835531
Look closely - the controller itself even has transparency. Not just the background.
If it wasn't for the checkered pattern, it'd be damn near impossible to tell that it was anything other than just standard cutout with transparent background.
>>
>>46835573
I dunno about you, but in Firefox 39, >>46835514
looks perfectly transparent to me.
>>
File: Untitled.jpg (122KB, 1078x688px) Image search: [iqdb] [SauceNao] [Google]
Untitled.jpg
122KB, 1078x688px
>>46835689
Oops, forgot pic
>>
>>46835689
>>46835708
The issue is not with 4chan, it is with Firefox.
You have to open the image in its own tab.
http://i.4cdn.org/g/1425422906809.png
>>
Opera 12 has that op. And smooth scrolling.
>>
File: poop.webm (2MB, 1920x1080px)
poop.webm
2MB, 1920x1080px
>>46835507
try this:
/* This Source Code Form is subject to the terms of the Mozilla Public
* License, v. 2.0. If a copy of the MPL was not distributed with this file,
* You can obtain one at http://mozilla.org/MPL/2.0/. */
@media not print {
/* N.B.: Remember to update ImageDocument.css in the tree or reftests may fail! */
body {
color: #eee;
/* background: #222 url("chrome://global/skin/media/imagedoc-darknoise.png"); */
background: #2E3B41;
}
img.decoded {
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAIAAAAC64paAAAALElEQVQ4jWP8//8/A25w8OBBPLJMeOQIglHNI0MzC/40ZG9vTyubRzWPDM0AKzgIamYmFXoAAAAASUVORK5CYII=) !important;
/* background: hsl(0,0%,90%) url("chrome://global/skin/media/imagedoc-lightnoise.png"); */
/* color: #222; */
}
}
>>
>>46835721
I guess Firefox just treats standalone images as if there was a white background behind them. It works fine on normal web pages though, so why bother screwing with it?
>>
Test comment
>>
>>46835781
Doesn't seem to work for me.
It does change the background to blueish (why?) but the grey square remains.
>>
>>46835797
>so why bother screwing with it?
Because I open images in their own tab all the time so this is a real problem for me.
>>
File: Untitled.png (469B, 176x165px) Image search: [iqdb] [SauceNao] [Google]
Untitled.png
469B, 176x165px
>>46835840
>bluish
#2e3b41 = pic
>>
>>46835893
I don't care what the background color is, really.
But the grey square remains unfortunately. That's the only thing that matters.
>>
>>46835507
>>46835538
Firefox changed the CSS rule for working with transparent images in version 36 to use `img.transparent` instead of `img.decoded`.

Here's the one I use in Vimperator:

        style -name transpng * body > img.decoded, body > img.transparent { background: none !important; } body > img.decoded:hover, body > img.transparent:hover { background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAMAAAC6V+0/AAAABlBMVEV7e3sAAAD2vrKOAAAAAnRSTlM7O/sqyyQAAAAfSURBVHja1c6hAQAAAAFB9l9aYwGBj5ceie4bZ0ZaKKW0AMmwXSJmAAAAAElFTkSuQmCC) !important; }


Just the CSS part:

@namespace url(http://www.w3.org/1999/xhtml);
body > img.decoded, body > img.transparent {
background: none !important;
}
body > img.decoded:hover, body > img.transparent:hover {
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAMAAAC6V+0/AAAABlBMVEV7e3sAAAD2vrKOAAAAAnRSTlM7O/sqyyQAAAAfSURBVHja1c6hAQAAAAFB9l9aYwGBj5ceie4bZ0ZaKKW0AMmwXSJmAAAAAElFTkSuQmCC) !important;
}
>>
>>46835781
Nightly uses this:
/* This Source Code Form is subject to the terms of the Mozilla Public
* License, v. 2.0. If a copy of the MPL was not distributed with this file,
* You can obtain one at http://mozilla.org/MPL/2.0/. */

@media not print {
/* N.B.: Remember to update ImageDocument.css in the tree or reftests may fail! */

body {
color: #eee;
background-image: url("chrome://global/skin/media/imagedoc-darknoise.png");
}

img.transparent {
background: hsl(0,0%,90%) url("chrome://global/skin/media/imagedoc-lightnoise.png");
color: #222;
}
}


So change that where necessary, perhaps.
>>
File: Untitled.png (638KB, 960x1040px) Image search: [iqdb] [SauceNao] [Google]
Untitled.png
638KB, 960x1040px
Looks transparent to me, using Nightly.

Might want to update your Firefox, bro.
>>
Why is Firefox linking to something from Chrome?
>>
>>46835932
You're a wizard, Harry. This works perfectly.
All I did was replace the png;base64 "code" with my original one (for white squares) and now it looks identical to what I had before.
Thanks a lot anon.
>>
>>46835972
Nice job not reading/understanding the thread.
>>
>>46835983
Sure no problem. Which version and do you use img.decoded or img.transparent now?
Thread posts: 25
Thread images: 8


[Boards: 3 / a / aco / adv / an / asp / b / bant / biz / c / can / cgl / ck / cm / co / cock / d / diy / e / fa / fap / fit / fitlit / g / gd / gif / h / hc / his / hm / hr / i / ic / int / jp / k / lgbt / lit / m / mlp / mlpol / mo / mtv / mu / n / news / o / out / outsoc / p / po / pol / qa / qst / r / r9k / s / s4s / sci / soc / sp / spa / t / tg / toy / trash / trv / tv / u / v / vg / vint / vip / vp / vr / w / wg / wsg / wsr / x / y] [Search | Top | Home]
Please support this website by donating Bitcoins to 16mKtbZiwW52BLkibtCr8jUg2KVUMTxVQ5
If a post contains copyrighted or illegal content, please click on that post's [Report] button and fill out a post removal request
All trademarks and copyrights on this page are owned by their respective parties. Images uploaded are the responsibility of the Poster. Comments are owned by the Poster.
This is a 4chan archive - all of the content originated from that site. This means that 4Archive shows an archive of their content. If you need information for a Poster - contact them.