SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Wizard nofel's Avatar
    Join Date
    Aug 2007
    Location
    Earth
    Posts
    1,766
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    Question opacity for overlaying tags

    Hi,
    I have noticed then when i use a background that is opaque like 0.5 the text over it suppose in h1 also become opaque too. i tried giving h1 a 1 opacity but it didn't work. i do i make it not go transparent?
    example
    Code CSS:
    .background{
    width:300px;
    height:200px;
    background:#000;
    opacity:0.5;
    }
    Code HTML4Strict:
    <div class="background">
     <h1>Hello World</h1>
    </div>
    All those who wander aren't lost.

  2. #2
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,580
    Mentioned
    65 Post(s)
    Tagged
    2 Thread(s)
    To prevent the text from becoming somewhat transparent, too, you can use rgba colors for the background and apply transparency with the "a" parameter.

    background-color:rgba(255,255,255,.5);

    Another method that is backward compatible with older browsers is to use a small (often just one pixel) semi-transparent background image.

    background-image:url("trans50.png");

  3. #3
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,658
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •