Image Transparency Checkerboard
does anyone of you know if there is a way to change the way Vivaldi displays the transparency in images?
For example: https://cdn.shopify.com/s/files/1/0374/6925/files/Shoesize-adult-en.svg-INVERTED_1024x1024.png?v=1480855576
I get a checkerboard pattern where the picture is supposed to be transparent, and it's impossible to read the white text that is hidden in the transparent parts of the picture.
Is there a way to change this behavior?
@Laviic Copy/paste to IrfanView is a workaround, but I don't know how to change the transparency background.
Maybe use a bookmarklet:
Okay, thank you for the workarounds.
I guess it is simply not possible at this time...
It can be changed in Photoshop, maybe the following link helps:
I think that's because the default CSS set in that page code for that image was not right.
On your https://cdn.shopify.com/s/files/1/0374/6925/files/Shoesize-adult-en.svg-INVERTED_1024x1024.png?v=1480855576, all these
style"**"garbage was set.
<img style="-webkit-user-select: none;background-position: 0px 0px, 10px 10px;background-size: 20px 20px;background-image:linear-gradient(45deg, #eee 25%, transparent 25%, transparent 75%, #eee 75%, #eee 100%),linear-gradient(45deg, #eee 25%, white 25%, white 75%, #eee 75%, #eee 100%);" src="https://cdn.shopify.com/s/files/1/0374/6925/files/Shoesize-adult-en.svg-INVERTED_1024x1024.png?v=1480855576">
If we don't have them, the image transparent area become really transparent.
Same for other sites with transparent images. At least their CSS stylesheet need to be adjusted.
Sorry for only responding now. The topic was already kinda done for me, so I only accidentally noticed that there where more replies. Sorry for that!
If you open an image directly, Vivaldi wraps it into a standalone display page. That is also where that
stylecomes from, and it is precisely the behavior I would like to target and change. However, I don't know how to do that permanently... I would guess Vivaldi uses some kind of template for that standalone display page, but so far, I was unable to find it...
@Laviic When you're on that page, click RMB on that image, click on "Inspect" and in the "Styles" tab uncheck the
If you want a permanent solution, you have to write custom CSS for those pages, to overrule the default CSS with the checkerboard pattern. IMO too much work for something that could be done with 3 simple clicks manually (for each image). I guess it depends on how many of this type of images do you have to deal with on a daily basis...
@pafflick Thank you, I am aware of the 'inspect' and how to temporarily remove the style with it and stuff
However, I am not aware how to write custom CSS for it that would overwrite that style permanently. I guess I would have to kinda write my own extension or something? I don't know... But that is something I can easily read up on on the web, so don't worry.
And it happens quite regularly for me. Not really often. But regularly. Might not be super worth it for the images alone, but certainly for the learning experience!
Thanks again, and have a good one!
@Laviic Any extension for custom CSS should allow you to write the code for that. Whereas the code itself will be very simple and easy, the hardest part will be to assign that code to images only.