SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Addict
    Join Date
    Jan 2009
    Posts
    389
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Background opacity, text no opacity.

    Hi all

    I hava a demo here - http://www.ttmt.org.uk/opacity/

    It's a simple <a> link containing a <h2>

    I need the <a> to have 50% opacity but the text in the <h1> to be 100%

    I need the text to be like in the first <a> and background like the second <a>


    Code:
    <!DOCTYPE html>
    <html lang="en">
      <meta charset="UTF-8">
      
      <!--jQuery-->
      <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
      
      
      <!--css-->
      <link rel="stylesheet" href="css/master.css" />
      
      <style type="text/css">
        
        *{
          margin:0;
          padding:0;
        }
        html,body{
          height:100%;
          background:#fff;
          font-family:Helvetica, sans-serif;
        }
        #wrapper{
          width:900px;
          background:#ccc;
          min-height:100%;
          margin:0 auto;
          position:relative;
        }
        .btn{
          position:absolute;
          left:0;
          top:200px;
          display:inline-block;
          width:400px;
          padding:20px;
          margin:50px;
          text-decoration:none;
        }
        
        #red{
          opacity:.5;
          background:red;
        }
        .btn:first-of-type{
          top:50px;
          opacity:1;
        }
        h2{
          color:#fff;
          font-size:40px;
          opacity:1;
          display:block;
        }
      </style>
      
        
      <title>Title of the document</title>
      </head>
      
    <body>
      
      <div id="wrapper">
        
        <img src="img.jpg" alt="">
        
        
        <a href="" class="btn"><h2>Click Here</h2></a>
        
        <div id="red">
          <a href="" class="btn"><h2>Click Here</h2></a>
        </div>
        
        
      </div>  
      
    </body>
    
    </html>

  2. #2
    SitePoint Wizard bronze trophy chris.upjohn's Avatar
    Join Date
    Apr 2010
    Location
    Melbourne, AU
    Posts
    2,197
    Mentioned
    17 Post(s)
    Tagged
    1 Thread(s)
    To accomplish this you need to use an RGBA colour on the background itself as opacity changes the alpha channel for all child nodes within the parent element itself. E.g.

    Code css:
    .btn {
        background-color: rgba(255,0,0, .5);
    }

  3. #3
    SitePoint Addict
    Join Date
    Jan 2009
    Posts
    389
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for that


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
  •