SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Member
    Join Date
    Mar 2005
    Posts
    21
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    CSS Filter - Opacy

    How do I make a white text box appear transparent? See www.hallspoint.com and I want the white text box to appear tranparent to show the background in back.

  2. #2
    SitePoint Member
    Join Date
    Apr 2005
    Posts
    17
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    " background-color: transparent " will work.

    Currantly, you've got your #content set at :

    " background-color: #FFFFFF; "

    which gives the white background..

  3. #3
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,235
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    The code above will work if you want full transparency.

    If you want partial transparency this will work:

    Code:
    #content {
      /*opacity for IE5+*/
      filter: alpha(opacity=50);
      /*opacity for older Mozilla browsers*/
      -moz-opacity: 0.5;
      /*opacity for mozilla/safari*/
      opacity: 0.5;
      /*but it still won't work in Opera, sorry*/
    }

  4. #4
    Non-Member
    Join Date
    Jan 2005
    Location
    Netherlands
    Posts
    4,300
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hello

    you need an extra layer if the text needs no opacity

    .op{background-color: #FFFFFF;opacity: 0.5; filter:Alpha(Opacity=50);-khtml-opacity: 0.5;-moz-opacity: 0.5;}

    if you need it to work in Opera you have to use a PNG

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
    <html><!-- InstanceBegin template="/Templates/index.dwt" codeOutsideHTMLIsLocked="false" -->
    
    <!-- Mirrored from www.hallspoint.com/ by HTTrack Website Copier/3.x [XR&CO'2005], Wed, 11 May 2005 12:46:11 GMT -->
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <!-- InstanceBeginEditable name="doctitle" -->
    <title>Halls Point | Abaco, Bahamas</title>
    <!-- InstanceEndEditable --><link href="main.css" rel="stylesheet" type="text/css">
    <!-- InstanceBeginEditable name="head" --><!-- InstanceEndEditable -->
    	<style type="text/css">
    
    	
    #content,.op{
    	font-family: Arial, Helvetica, sans-serif;
    	font-size: meduim;
    	color: #000000;
    	text-decoration: none;
    	margin-top: 115px;
    	margin-left: 250px;
    	position: absolute;
    	height: 300px;
    	width: 500px;
    	text-align: justify;
    	padding: 5px;
    	overflow: auto;
    }
    .op{background-color: #FFFFFF;opacity: 0.5; filter:Alpha(Opacity=50);-khtml-opacity: 0.5;-moz-opacity: 0.5;}
    </style>
    </head>
    
    <body>
    <div id="back"><img src="images/back.jpg"></div>
    <div id="title">Halls Point, Bahamas</div>
    <!-- InstanceBeginRepeat name="nav" --><!-- InstanceBeginRepeatEntry -->
    <div id="navigation">
      <ul>
        <li><a href="index.htm">home</a></li>
        <li><a href="property.htm">property details</a></li>
        <li><a href="island.htm">island details</a></li>
        <li><a href="buyer.htm">buyer info</a></li>
        <li><a href="contact.htm">contact us</a></li>
      </ul>
    </div>
    <!-- InstanceEndRepeatEntry --><!-- InstanceEndRepeat -->
    <!-- InstanceBeginEditable name="content" -->
    
    <div class="op"></div>
    <div id="content">Best of the Best<br>
     Halls Point is the tip of the southern peninsula on highly desirable and secluded Sugar Loaf Cay, this is truly a one-of-a kind property. The original owner and sub-divider of Sugar Loaf Cay retained the best as his own; Halls Point is the largest lot on Sugar Loaf Cay and offers the greatest elevation, most private setting, bounded on three sides by water with fantastic panoramic views of turquoise Abaco Sound.
    </div>
    
    
    
    <!-- InstanceEndEditable -->
    <div id="photo">This is where the phot<!-- InstanceBeginEditable name="photos" -->photos<!-- InstanceEndEditable -->os would go</div>
    
    </body>
    <!-- InstanceEnd -->
    <!-- Mirrored from www.hallspoint.com/ by HTTrack Website Copier/3.x [XR&CO'2005], Wed, 11 May 2005 12:46:11 GMT -->
    </html>

  5. #5
    SitePoint Member
    Join Date
    Mar 2005
    Posts
    21
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Talking

    Thanks. This has been something that has bogged me down for a while.


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
  •