How to make slightly transparent divs (Tip)

Posted 6 years, 5 months ago (Edited 6 years, 5 months ago) by purrluto

I don't know if there's already a posted workaround, but I had quite a bit of trouble with this when I was trying to figure it out and it took a bit of time. As all that comes up when I searched up how to change the opacity of a div was to do it with CSS, I thought I might as well post it here as it might help someone. I don't know if there's a different thread for tips and such, so I'm sorry if this is considered spam ;;

To make a div slightly transparent, all you have to do is make the div transparent, and then put in a solidly colored background image of your choice. Just make sure the entire canvas is filled up with the color. so, the code would look like (minus the -'s, of course): <-div style="background-color: transparent; background-image: url();"><-/div>

I found the easiest way to do the background image was to use dA muro. If you don't have an art program of some sort that can do opacity things, then this is the best bet. Just make a layer and color it solidly and edit the layers opacity to make it completely smooth. After that you can upload it to sta.sh and use the direct image link. Just make sure you don't have the solid white background layer showing or opaque.

I'm sorry if this is considered spam or anything, I just didn't see anything explaining how to do this in toyhou.se or when I looked it up, so I thought it would be helpful to post. :')