Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    Regular Coder
    Join Date
    Jul 2002
    Posts
    197
    Thanks
    0
    Thanked 0 Times in 0 Posts

    How to make this div transparant?

    In the HTML below I would like to make the red backgroundcolor transparant for example for 60%. Can someone help me how to do this?

    This is the HTML:

    <html>
    <head><title>Untitled</title>
    <style type="text/css">
    <!--
    div {
    border-top: 1px solid orange;
    border-bottom: 1px solid orange;
    border-right: 1px solid orange;
    border-left: 1px solid orange;
    width: 50%;
    height:40%;
    background-color: #ff0000;
    }
    -->
    </style>
    </head>
    <body>
    <div>
    How can I make this red background-color transparant for example for 60%?

    </div>
    </body>
    </html>

    Kippie

  • #2
    Senior Coder A1ien51's Avatar
    Join Date
    Jun 2002
    Location
    Between DC and Baltimore In a Cave
    Posts
    2,717
    Thanks
    1
    Thanked 94 Times in 88 Posts
    you might want to try playing around with this:

    moz-opacity:0.6;
    filter:alpha(opacity=60);

    plus this is a CSS question and not JS....
    Tech Author [Ajax In Action, JavaScript: Visual Blueprint]

  • #3
    Regular Coder
    Join Date
    Jul 2002
    Posts
    197
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks for your help. Sorry I didn't know about the forum. But the problem with your code "filter:alpha(opacity=60);" is that the text on the background becomes also transparent and that's what I would like to avoid. So I would like to have the background transparent but not the text in it. Still any hope?

    Kippie

  • #4
    New to the CF scene
    Join Date
    Dec 2003
    Location
    new york
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Just guessing here... <h1 filter:alpha(opacity=60);.... or something like that, might change the opacity just for the text of heading 1...

  • #5
    Regular Coder
    Join Date
    Jun 2002
    Location
    Atlanta, GA.
    Posts
    313
    Thanks
    0
    Thanked 0 Times in 0 Posts
    PHP Code:
    <div style="position:relative;width:50%;height:40%">
    <
    div style="position:absolute;left:0;top:0;width:100%;height:100%;background-color:red;filter:alpha(opacity=60);-moz-opacity:0.6"></div>
    <
    div style="position:absolute;left:0;top:0;width:100%;height:100%;padding:10;font-size:12px;">

    This text is solid on a transparent background

    </div>
    </
    div
    The answer does not come from thinking outside the box, it comes from realizing the truth :-
    "There Is No Box". [JavaScript Gadgets'n'Gizmos][JavaScript-FX]

  • #6
    Kor
    Kor is offline
    Red Devil Mod Kor's Avatar
    Join Date
    Apr 2003
    Location
    Bucharest, ROMANIA
    Posts
    8,478
    Thanks
    58
    Thanked 379 Times in 375 Posts
    plus this is a CSS question and not JS....
    Oh, but it might be a JS one if using styles on-the-fly.

    By the way, knows anyone which is the on-the-fly attribute correspondent with CSS alpha(opacity=) and -moz-opacity:

    ??
    document.getElementById(id).style.filter = 'alpha(opacity=60)';
    document.getElementById(id).style.mozOpacity = '0.6';
    ??

    Or?
    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*


  •  

    Posting Permissions

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