We launched new forums in March 2019—join us there. In a hurry for help with your website? Get Help Now!
MODX Community Forums Archive

Do you know of any tricks to solve the opacity inheritance problem ?

    • 6726
    • 7,075 Posts
    davidm Reply #1, 20 years, 1 month ago
    I have been toying with the opacity property lately, and I have come accross this problem with a page centered layout I have.

    The thing is, I have a complex background image (underwater picture), and while I know how to create a PNG transparency with a simple background image, I don’t know how to do this with this kind of background.

    Even if opacity (translucency) is a style property defined in CSS-3 specification CSS3 Color Module, chapter 3.2, browsers already support it. According to the spec, opacity can be thought of conceptually as a postprocessing operation, so the selected grade of transparency is applied to all its content.

    It means that, if you have a DIV with text inside, it is impossible to have opaque text on translucent background, because if you set the opacity property for the container DIV, all its content inherits the transparency and it is impossible to override it... by normal means.

    If you try this example code, you will find that opaquetext is not opaque, it inherited the parent opacity attribute and style redefine is discarded, for the reason explained above.

    See : http://developer.mozilla.org/en/docs/Useful_CSS_tips:Color_and_Background

    There are two workarounds (see link above), but each involve absolute positionning which I don’t want.

    I have submitted this to a few qualified people but nobody has a solution to offer...
    I wondered if one of the whiz designers around here could figure out a way to do this ?

    Thanks !

      .: COO - Commerce Guys - Community Driven Innovation :.

      MODx est l'outil id
      • 25663 MODX Staff
      • 12,272 Posts
      Ryan Thrash Reply #2, 20 years, 1 month ago
      You have no choice but to do positioning unfortunately. What is the layout you’re trying to achieve?
        Ryan Thrash, MODX Co-Founder
        Follow me on Twitter at @rthrash or catch my occasional unofficial thoughts at thrash.me
        • 6726
        • 7,075 Posts
        davidm Reply #3, 20 years, 1 month ago
        So I figured sad

        What I want to achieve is this :



        Which is doable with positionning, yes (I am almost done already)... but when I started I thought it could be done with a page centered layout tongue
          .: COO - Commerce Guys - Community Driven Innovation :.

          MODx est l'outil id
          • 7455
          • 2,204 Posts
          Dimmy Reply #4, 20 years, 1 month ago
          why not have one div (div1) with no background that is centered then in that div place a new div (div2) with your background and create another div (div3) in div1 on top of div2 that holds the content.
          an zet the deepsee image as bg in the body
          that should work

          now you can set div1 to relative and div2 and 3 to absolute

          I normaly use the folloing css code to center my main div (div1) by surounding this main div (div1) by another div (horizon) with the foloing properties:

          #horizon        
{ background-color: transparent;
  text-align: center;
  position: absolute;
  top: 50%;
  left: 0px;
  width: 100%;
  height: 1px;
  overflow: visible;
  visibility: visible;
  display: block; }

#div1
 { position: absolute; 
   background-image: url("../gfx/basic/bg_main.jpg"); 
   background-repeat: no-repeat;  
   text-align: left;
   margin-left: -450px; /*half the width of your design*/
   left: 50%;
   top:-293px; /*half the height of your design*/
   width: 900px; 
   height: 586px; }


          hope this helps for you
            follow me on twitter: @dimmy01
            • 7455
            • 2,204 Posts
            Dimmy Reply #5, 20 years, 1 month ago
            here I made a site using another hack to get this to work for ie and ff

            http://www.wisecasing.nl/ not modx

            using 2 divs
              follow me on twitter: @dimmy01
              • 6726
              • 7,075 Posts
              davidm Reply #6, 20 years, 1 month ago
              Thanks a lot DImmy I’ll give this a look smiley
                .: COO - Commerce Guys - Community Driven Innovation :.

                MODx est l'outil id
                • 9941
                • 65 Posts
                foniksonik Reply #7, 20 years, 1 month ago
                Probably not what you’re trying to do... but I thought this site http://inventive.us/iClip4/ did a pretty good job of using transparency.

                Maybe there’s some tip in their source + css that will help?