Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Colored rectangles over a semi-transparent "veiled" figure?

  • This topic is empty.
Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #201680
    Egp
    Participant

    Hi,
    I’m having trouble with (I think!) the opacity parameter.

    I have a page design with a large figure occupying most of the screen. When an option in the menu is selected, I want the large figure covered with that white semi-transparent “veil” typical of many webpages to cover previous content, so that it still can be seen in the background (sort of translucid), but with other rectangles containing text and other contents appearing over it, but these in NORMAL full color, not transparent.

    So I have that figure (which is an <img...>, not as background) covered with a nested <div> styled with a
    white background and opacity:0.8 (.products in the codepen fragment below) to create that white “veil”, and then I put other div’s and span’s nested in the HTML to create the various rectangles with other content over it.

    But these are also appearing as semi-transparent, and I want them FULL, normal. It’s as if they automatically “inherit” the “transparency” of their parent, the opacity css property: even setting z-index to any number greater than 0 (all the other html elements have no z-index setting…) doesn’t seem to work…

    Here’s the relevant fragment in codepen:
    http://codepen.io/anon/pen/VLvbqP?editors=110

    (I hope I got it right with the link! :> I snipped most of my actual code down to the relevant bits: .main and .products are the relevant classes, and #overit1 is a rectangle with text that is also appearing transparent, instead of opaque, with opacity:1, but the figure (fundo.jpg) isn’t available to see, so there’s just the code in codepen, not the actual web page…) I hope this is sufficient,
    anyway, thanks for any help or advice…

    #201681
    Paulie_D
    Member

    It’s as if they automatically “inherit” the “transparency” of their parent

    Child elements do…that’s the default.

    #201682
    Paulie_D
    Member

    I suspect you want something more like this

    http://codepen.io/Paulie-D/pen/YXyQPx

    #201684
    Egp
    Participant

    Hi, thanks for the answer,

    but I’ve actually set opacity to 1 in the child element and it doesn’t work either. It rather appears that then you cannot have non-transparent (opacity:1) elements over (or rather, nested, as child of) semi-transparent (opacity:0.8) elements.

    Maybe might it work if I put the opaque (normal) elements not as child of semi-transparent ones, but “outside” them and position them (rather artificially) with position:relative or absolute over the semi-transparent ones?

    And, it’s not quite clear that the default is the children inherit all properties from the parent element; I began fiddling with CSS assuming that, but it turns out that many properties aren’t inherited: or did you mean just the opacity property??

    Because other properties DEFINITELY aren’t inherited. And I actually looked up in CSS schools for the opacity property page (http://www.w3schools.com/cssref/css3_pr_opacity.asp), and it says that it’s not an inherited property (Inherited: no)…
    But it’s very much possible that my understanding of all these things are wrong… (sigh)

    I must say, (this is a rant) HTML was already an awkward ‘language’ to program with, more adequate for computers than ‘humans’ to write (why didn’t they make markup with something simpler to type, like […]?)
    And CSS is IMHO an unbelievable mess!
    Just some examples, a property is word-wrap, but it’s very easy for one to write wordwrap unwarily, and it doesn’t work (of course!!)…
    HTML has syntax parameters with = and css uses :. It’s very easy to mix and confuse the two! In theory, it all seems “peachy”, but in practice these two languages are simply AWFUL to program by hand! Awful! It’s still that mentality of a fixed “machine” syntax, nothing easier for humans (like the fixed {prop:contents; …. }) All these characters in practice, when writing, are so cumbersome to type and read… CSS could and should have had a cleaner and simpler syntax!
    (sigh)

    #201685
    Paulie_D
    Member

    It rather appears that then you cannot have non-transparent (opacity:1) elements over (or rather, nested, as child of) semi-transparent (opacity:0.8) elements.

    That’s right…you can’t.

    Maybe might it work if I put the opaque (normal) elements not as child of semi-transparent ones, but “outside” them and position them (rather artificially) with position:relative or absolute over the semi-transparent ones?

    That’s exactly what my Codepen does. The background of the overlay is rgba (so it has some transparency of it’s own)…no need to make the image have any opacity change unless you want to.

    And CSS is IMHO an unbelievable mess!

    You’re entitled to an opinion but it’s managed pretty well for a lot of years just the way it is.

    in practice these two languages are simply AWFUL to program by hand!

    That’s why most developers use apps & programs that make it much easier to code by hand. Preprocessors, Markdown, Emmett etc.

    Also, we validate our code regularly that will highlight incorrect code.

    Wait ’til you get to Javascript…that”ll freak you right out. :)

    #201686
    Egp
    Participant

    Sorry, I was writing the other answer while you posted your second one, so I did’nt see it prior to post mine…

    Yes, something like this, but with other colored opaque rectangles (and other figures and other contents) over the semi-transparent “veil” that’s by its turn over that background figure. Only text as you’d shown works ok (in fact, my .title <div...> element with a text “Products XX” works ok.
    The problem is other rectangles with a background color and opacity 1 over the semi-transparent (opacity:0.8) element that do not work. They appear as semi-transparent as well, even with opacity:1… (at least in the Google Chrome, I’m testing in Google Chrome, but I doubt that’d be relevant…)

    But thanks anyway, I must go back to CSS shools and learn more… :))

    #201687
    Paulie_D
    Member

    The problem is other rectangles with a background color and opacity 1 over the semi-transparent (opacity:0.8) element that do not work.

    You want more divs on top of the overlay…you can do that too…the point is don’t use opacity…use background colors that have an alpha value making the background colors semi-transparent.

    #201688
    Egp
    Participant

    Ah, alright. Thanks, I’d almost forgotten about the rgba and alpha values, thinking they and opacity would be two ways to set the same thing…
    And I also need to look into your codepen code.
    Cheers,

Viewing 8 posts - 1 through 8 (of 8 total)
  • The forum ‘CSS’ is closed to new topics and replies.