Is there a way to differentiate between transparent and white parts of images?

Question

I saw an answer that displays a transparent image with a white circle in the center. Is there a way to differentiate between the two parts?

1. I know that I can right click on the image and open the image in a new tab, but I want to know if there is a way to do so within the site.

2. I can click on the share link on the answer, paste the answer link into the browser and press enter. When I do so, there will be an instant where the answer will be highlighted orange, so that the transparent parts of the image also turn orange while the white parts stay white. This will only allow me to see the difference for an instant; and I'll need to refresh the page again and again to study he image.

Try it for yourself

Say there isn't a way; is there any way I can do the same thing I did to answers (refresh the page with the link to the answer) to questions that have transparent images in them? The question never seems to turn orange.

Answer 1

In the old days, we (ab)used a blockquote for this, because it had a distinctive background. Now, the styling has been improved (and, yes, it is an improvement) to only show a vertical line in the gutter for demarcation purposes, with no change to the background color.

Nowadays, the only element that has a background color associated with it is the code-block, so it can be (ab)used in a similar way. Of course, it's a bit tricky to get HTML to render (and thus the image to be displayed) inside of a code-block, since the whole point of a code-block is that it displays the raw code, not rendered Markdown/HTML. Therefore, you can't use the Markdown syntax at all; you need to use an <img> tag nested inside of <pre> tags:

<pre>
<img src="https://i.sstatic.net/A9em5.png" alt="Fuzzy circular mask">
</pre>

I've made an edit to the post that implements the above-described change. It provides a slight improvement, but the contrast is still very low. (On one of my screens, I can hardly discern the difference. On another one, the contrast is greater. The adjustment of your monitor, specifically its contrast settings, will dictate whether you will see any improvement at all.)

Please use this very sparingly! Lots of people misuse inline code formatting's incidental alteration to the background color as a way to "highlight" text. That's not what it is for. In a very unusual edge-case like this, I think it is justifiable to abuse formatting in this way to enhance accessibility. In the vast majority of cases, it is not.

Answer 2

is there anyway I can do the same thing I did to answers (refresh the page with the link to the answer) to questions that have transparent images in them?

Userscripts, of course! Here is one for temporarily highlighting the background of any post on the page (including the question and answers) - it adds a "Highlight" button to post action menu that highlights the post for a couple of seconds on click (future versions will make both the color and duration configurable).

Detailed info on the userscript can be found on its Stack Apps post.

Answer 3

The way to make the post independent of any tricks and still downloadable is to utilize the markdown to have two images, one that aids displaying and one that is the original.

For example, in the original post:

"I made an image with white where I wanted the image to show, and transparency where I wanted it masked. I even gave it varying levels of transparency to see if I could get fuzzy masking.

^^^ It's difficult to see the image because it's white on transparent, but it's there. You can just right click and download it."

We simply post it this way instead, with the image displayed having the transparency replaced, and using a second URL for the downloadable original:

"I made an image with white where I wanted the image to show, and transparency where I wanted it masked. I even gave it varying levels of transparency to see if I could get fuzzy masking.

^^^ It's difficult to see the image because it's white on transparent, but it's there. You can just right click and download it."

Notice that no additional efforts are required for the reader, it's simply a matter of how you write the post when there's an image which is going to be a problem.

Answer 4

Thanks to @JourneyGeek for the advice! From this comment:

View the site in dark mode.

Yes, apparently you can switch to dark mode and all of your troubles will be solved.