CODEWITHSUNDEEP
htmlcsspseudo-element
Frankenmint
Frankenmint

Reputation: 1632

transparent png not rendering as transparent?

I saved the image as a transparent png but nothing I can do seems to fix it!?! Any ideas???

enter image description here

It should look like this:

enter image description here

Here is a copy of the image in GIMP showing that it's indeed transparent:

enter image description here

finally, Some good old code:

The Markup:

<form class="search" action="search.php"><input class="search" type="text" name="search" id="searchbox"/></form>

Search Box CSS:

.search, .search:active, .search:focus, .search:visited {
    position: absolute;
    color: #fff;
    top: 3px;
    width: 368px;
    right: 9%;
    font-size: 28px;
    z-index: 3;
    border-radius: 20px;
    /* box-shadow: inset -2px 0px 1px rgba(0,0,0,.8); */
    text-indent: 10px;
    text-shadow: 0px -2px 3px rgba(0, 0, 0, .7);
    background-color: #00D4C7;
}

The Search icon css itself:

Pseudo ::before element
.search:before {
    content: "";
    position: absolute;
    top: 7px;
    left: 268px;
    background-image: url("images/icon-search.png");
    background-color: rgb(0, 185, 171);
    width: 46px;
    height: 30px;
    z-index: 4;
}

Note: If I remove the class search from form, It removes my image, if I remove class search from the input element it still renders with that funky shade over my image...Any ideas?

Edit 1: If I do as suggested by setting the explicit dimensions of the image (as I did for other pseudo elements with no problem) it does not resolve my issue. I've already submitted the project so at this point it's a matter of me wanting to know what happened and how I can fix this. I resorted to a css hack that changed the brightness to a closer match [with a faint outline still 😞 ]

enter image description here

Edit 2: Show me the JS Fiddle!

Upvotes: 2

Views: 23943

Answers (4)

Sankofa
Sankofa

Reputation: 659

I found that the images that I was getting from the internet were not truly transparent. This website enabled me to get it to work. https://www.remove.bg/ (the image I used had the checkered background to indicate it was transparent, it just didn't work in the img tag until I used that website.)

Upvotes: 2

Frankenmint
Frankenmint

Reputation: 1632

My image itself was not truly transparent. There is is a small opacity channel that causes that grey haze to appear on a non-white background. I caught wind of this when posting to imgur....and confirmed it for sure when I actually made a copy of the layer (in photoshop) using select by color.

enter image description here

Solution: Check your images...to do this, load it onto a window by itself and set the html body to a non-white color. Wish I thought to do this before submitting this:

enter image description here

Upvotes: 4

smrubin
smrubin

Reputation: 551

This might be happening because your background image size is different than its container's, .search::before, size. And/or because your .search::before background-color is a different hex value.

Try this: Add background-color: transparent; and background-size: 46px 30px; to .search::before. This will make it so that if your background image is smaller than the container, the rest of the space will be transparent and set the background image size to be the same as its container, which you have explicitly set.

Upvotes: 0

CodeWeis
CodeWeis

Reputation: 856

you did give your image a background-color: rgb(0, 185, 171); what is #00b9ab

and the searchbox background-color: #00D4C7; what is rgb(0, 212, 199)

Upvotes: 1

Related Questions