cssunicodetransparency

Background not visible behind the "whitespace" of a Unicode Character


I am using a sunburst behind a unicode character (eye, &#128065), with a CSS of:

.the-eye{
    width:100%;
    border-radius:50%;
    box-shadow: 0 0 20px 10px #eeee11;
}

HTML:

<span class="the-eye">&#128065;</span>

However, instead of a clean yellow background behind it, I see a white circle which appears to be rendered as part of the eye graphic. Is there a way to make that white part of the unicode transparent?

eye with with background over sunburst

Verified on Chrome and Firefox.


Solution

  • @Paulie_D is correct: set the background-color to the same as the shadow.

    .the-eye{
        width:100%;
        border-radius:50%;
        font-size: 50pt;
        box-shadow: 0 0 20px 10px #eeee11;
        background-color: #eeee11;
    }
    <span class="the-eye">&#128065;</span>