Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • Transparent background using CSS

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 207
    Comment on it

    Hey there!

    There are never enough things to do with CSS. We may think of the weirdest stuff, and CSS makes it possible. One such thought that popped into my mind was of transparent background. We have used  colors and images as backgrounds. But they are all opaque. I thought of trying a transparent (semi-transparent) background keeping the opacity of the text unchanged. One alternative to do so is using a semi-transparent PNG image. But that would not be very efficient. Also, it would require use of different images with different opacity and different colors in different needs. 

    Let's do this with pure CSS.

    background-color: rgba(x, y, z, opacity);

    It is just this line of CSS that needs to be added to give the effect we desire.

    Here is a sample code snippet :

    HTML :

    <p>
      <span>Hello world!</span>
    </p>

     

    CSS :

    p{ 
        background-color: rgba(170, 190, 45, 0.2);
        width: 15%;
        padding: 10px;
    }

     

    OUTPUT :

     

    I also tried the same in a recent work at office and got the following result.

     

    It can be seen that the title of the image has a transparent turquoise background.

     

    Happy Coding :)

 0 Comment(s)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: