Question

how to make transparent effect in css

  • Posted on January 20, 2022
  • CSS
  • RijinAsked by Rijin

i am trying to creating a text editor using html ,css and javascript.But i need to make background as transparent.how do i make it using css.


Submit an answer

This textbox defaults to using Markdown to format your answer.

You can type !ref in this text area to quickly search our full set of tutorials, documentation & marketplace offerings and insert the link!

Sign In or Sign Up to Answer

These answers are provided by our Community. If you find them useful, show some love by clicking the heart. If you run into issues leave a comment, or add your own answer to help others.

Hi @Rijin,

If you just want your element to be transparent, it’s really as easy as :

background-color: transparent;

But if you want it to be in colors, you can use:

background-color: rgba(255, 0, 0, 0.4);

Or define a background image (1px by 1px) saved with the right alpha.

(To do so, use Gimp, Paint.Net or any other image software that allows you to do that.

Just create a new image, delete the background and put a semi-transparent color in it, then save it in png.)

The best thing to do would be to mix both, with the rgba first and the 1px by 1px image as a fallback if the browser doesn’t support alpha :

background: url('img/red_transparent_background.png');
background: rgba(255, 0, 0, 0.4);