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.
Page 1 of 2 12 LastLast
Results 1 to 15 of 16
  1. #1
    Regular Coder Ranger56's Avatar
    Join Date
    Mar 2005
    Location
    Kent, WA.
    Posts
    783
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Making the background opacity lower but not the text's opacity

    http://www.spiderseatbabies.com/swee/index.html

    Is there any way to put a grey background behind the text, and make it's opacity lower but keep the text's opacity at 100%?

  • #2
    Regular Coder Ranger56's Avatar
    Join Date
    Mar 2005
    Location
    Kent, WA.
    Posts
    783
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Anyone know?

  • #3
    Regular Coder
    Join Date
    Jan 2005
    Posts
    221
    Thanks
    2
    Thanked 0 Times in 0 Posts
    nest two divs... opacity of the bottom one is x% and it has the background opacity of the top one is 100% and the bg is transparent

  • #4
    Regular Coder Ranger56's Avatar
    Join Date
    Mar 2005
    Location
    Kent, WA.
    Posts
    783
    Thanks
    0
    Thanked 0 Times in 0 Posts
    can you explain or cod e that better please?

  • #5
    Regular Coder
    Join Date
    Jan 2005
    Posts
    221
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Code:
    <div id="a">
      <div id="b">
        CONTENT HERE
      </div>
    </div>

    class "a" gets the lowered opacity
    class "b" gets full opacity and "background: transparent;"


    cya

  • #6
    Regular Coder Ranger56's Avatar
    Join Date
    Mar 2005
    Location
    Kent, WA.
    Posts
    783
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks.

  • #7
    Regular Coder ArcticFox's Avatar
    Join Date
    Jan 2004
    Location
    Vostok Station, AQ
    Posts
    602
    Thanks
    35
    Thanked 3 Times in 3 Posts

    Internet Explorer

    Repeating:

    As always, you can also 'fake' the transparency: http://arctic.ithium.net/

    The BG on the iFrames is edited to look like you're looking through a tinted window, but is not actually transparent thus removing any possible cross-browser issues.
    <div> - putting your mind in a box since 1997

  • #8
    Regular Coder Ranger56's Avatar
    Join Date
    Mar 2005
    Location
    Kent, WA.
    Posts
    783
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I tried the nested Divs but something went wrong

    http://www.spiderseatbabies.com/swee/index.html <<HTML

    http://www.spiderseatbabies.com/swee/scott.css <<CSS

    The text bg makes it's own box with scroll bars that the textcontent div is in and has scroll bars, and it doesn't work/

  • #9
    Regular Coder Ranger56's Avatar
    Join Date
    Mar 2005
    Location
    Kent, WA.
    Posts
    783
    Thanks
    0
    Thanked 0 Times in 0 Posts
    please I need help with this.

  • #10
    Regular Coder Ranger56's Avatar
    Join Date
    Mar 2005
    Location
    Kent, WA.
    Posts
    783
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by singedpiper
    Code:
    <div id="a">
      <div id="b">
        CONTENT HERE
      </div>
    </div>

    class "a" gets the lowered opacity
    class "b" gets full opacity and "background: transparent;"


    cya

    Ok, I tried that, and everthing in the "a" div gets lowered opacity...

    http://www.spiderseatbabies.com/swee/index.html

  • #11
    Senior Coder
    Join Date
    Dec 2004
    Location
    Essex, UK
    Posts
    2,636
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Are you trying to make it look like the background is seamless? ie. the diagonal lines carry on past the scrollbars?

    If so, you could just set the background to the same image but keep it fixed... you may have to play with the margins a bit to get it lined up.

  • #12
    Regular Coder Ranger56's Avatar
    Join Date
    Mar 2005
    Location
    Kent, WA.
    Posts
    783
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I gave up on it after a few days of nothing working.

  • #13
    Regular Coder ArcticFox's Avatar
    Join Date
    Jan 2004
    Location
    Vostok Station, AQ
    Posts
    602
    Thanks
    35
    Thanked 3 Times in 3 Posts

    Internet Explorer

    You must be a young kid - you give up too easily.

    We can make it work for you, but if you don't even want to take the time then please don't waste ours.
    <div> - putting your mind in a box since 1997

  • #14
    Regular Coder Ranger56's Avatar
    Join Date
    Mar 2005
    Location
    Kent, WA.
    Posts
    783
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by ArcticFox
    You must be a young kid - you give up too easily.

    We can make it work for you, but if you don't even want to take the time then please don't waste ours.

    Go away.

  • #15
    New to the CF scene
    Join Date
    Jan 2007
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Ranger56 View Post
    Ok, I tried that, and everthing in the "a" div gets lowered opacity...

    http://www.spiderseatbabies.com/swee/index.html
    Instead if placing div b inside div a, you could place it after it, then use absolute positioning and z-index to put div b on top of div a.

    <div id="a" style="position:absolute;z-index:2;top:5;left:5;width:50;height:50;background-color:transparent">Div Contents Here</div>

    <div id="b" style="position:absolute;z-index:1;top:5;left:5;width:50;height:50;opacity:0.5"></div>

    Of course, opacity:0.5 alone is not enough for complete cross browser compliance, but you get the idea.


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

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