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.
>>46835507
Original file.
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;
}
>>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.
>>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.
>>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.
>>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.
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?
