ARTICLE AD BOX
I’m a beginner in programming and I’m building an HTML page to generate post designs for my own company.
The idea is to keep a fixed layout (structure, size, and logo) and only change the text content for each post.
My company logo is a PNG image with a transparent background, stored locally.
The problem is that the logo is not clearly visible:
On a white background, it looks too faded
On a blue background (original color), it looks “washed out” or almost censored
It seems like some blending or transparency effect is affecting it
Here is the CSS I’m using:
}/* ── LOGO ── */ .post .logo-area { position: absolute; top: 44px; left: 0; right: 0; display: flex; justify-content: center; align-items: center; } .post .logo-area img { height: 90px; width: auto; object-fit: contain; mix-blend-mode: screen; <!-- PREVIEW --> <div class="preview-wrap"> <div class="scale-wrap" id="scale-wrap"> <div class="post layout-1" id="post-canvas"> <!-- geo --> <div class="geo geo-tl"></div> <div class="geo geo-tr"></div> <div class="geo geo-br"></div> <div class="geo geo-bl"></div> <!-- logo --> <div class="logo-area"> <imgI suspect the issue might be related to mix-blend-mode, but I’m not sure how to fix it.
I will attach:
A screenshot of the generated image
The relevant CSS codeenter image description here
My question: how can I make the logo display with normal colors and good visibility regardless of the background color?
