White text over transparent image is uploading correctly but showing as dark grey when displayed

My site is an online Escape Room and for hints, I use .png images with white text, on a transparent background. I add these to a white site background and make them lightboxes with a dark overlay. This means they look blank until you click on them, but then the lightbox with dark overlay makes the white text visible.

This worked fine when I put the site together back in 2020. However I have been trying to update some of the hints based on player feedback and this approach is no longer working. The uploaded images look like white text on a transparent background when uploaded, but then the text displays as dark grey meaning it is legible without clicking - defeating the purpose and making it a spoiler rather than a hint.

I have done a clumsy workaround of making the original image larger with smaller text, so although you can still see there is text, it hopefully isn't legible without clicking. I have played around with the settings but can't see what might have changed and can't find any other way to update my hints (and I don't want to update ALL hints to a new format as this would be a massive undertaking).

I have included pictures to show what the hints used to look like (5), and what they look like now (6, 10) as well as the upload for 10 showing it does think it is white text on a transparent background. I am using a Mac, but have tried the update on a PC and had the same issue. The images are created in PowerPoint and saved from there as a .png. Same exact file and method as the original hints.

Does anyone know how I can get my white text to display as white?

Many thanks!

Can you share link to page where you use image? We can check easier

Oh weird, I had to include the url when I posted the question but didn't realise it wasn't part of the post.

The url is http://www.quarantini.space/ec-books

Many thanks!

14 hours ago, Quarantini said:

Oh weird, I had to include the url when I posted the question but didn't realise it wasn't part of the post.

The url is http://www.quarantini.space/ec-books

Many thanks!

 

So you want to these text show as white color?

Yes exactly!

If I import the picture back into PowerPoint then it is completely white, so it's not the image. I just don't know where the grey comes from. I've just tried it again on a PC (usually work on a Mac) and the grey seems to be a faint outline of the white text. The text in the image has no outline.

I also tried editing the Section Theme as per 

 but no dice.

Can you send an original image file? I tried checking but can't find a way to change text to white

I'm really sorry - I don't know why I don't get notified when there is a response. Here are 2 of the original files with white text.

Just a note about uploading images files to the forum. It appears that the forum software is converting some of the images to webp format. So you are not getting the original file.

In the previous post this conversion doesn't seem to have caused a problem. It's white text on a transparent background.

If you need to share original files then another means may need to be used

The problem appears to be that SS creates compressed versions of images that you upload for use in various viewport sizes. Unfortunately the compression routines for these particular images are producing artifacts. I'm assuming SS made a change to their compression routines so the artifacts are now occurring when they didn't before. Artifacts are not uncommon with compression and edge cases do occur. This appears to be the case here. White text on a transparent background is not the norm.

Here is what I suggest. Redo the images removing the black border, this isn't mandatory as the borders are black so aren't a problem when lightboxed. Then "hide" the images and use CSS to put the border around those images.

Add the following to Page Settings > Advanced > Page Header Code Injection for the page. Please see per-page code injection.

<style>

  [ data-section-id="6027cea83b0bfb2f21e52d43" ] .sqs-block-image .image-block-outer-wrapper:not( .image-block-v2 ) .image-block-wrapper {
  
    border : 2px dashed black;
    border-radius : 10px;
    
    }
  
  [ data-section-id="6027cea83b0bfb2f21e52d43" ] .sqs-block-image .image-block-outer-wrapper:not( .image-block-v2 ) .image-block-wrapper img {
  
    visibility : hidden;
    
    }
    
  </style>

Let us know how it goes.