• Resolved jgoldberg2013

    (@jgoldberg2013)


    CSS code:`#widget-title-three h3 {
    text-align: center;
    vertical-align:middle;
    opacity: 0.60;
    background-color: white;
    line-height: 43px;
    padding-bottom: 0px;
    color: black; }`
    The opacity has been applied to both the background image and the header text.
    HTML:`<div id=”widget-title-three” class=”widget-title-home”>
    <h3>HOW TO EXCHANGE</h3>`

    I have tried a 100 different variations but with no success. Hoping you can crack the problem.

Viewing 15 replies - 1 through 15 (of 27 total)
  • Thread Starter jgoldberg2013

    (@jgoldberg2013)

    I did use backticks for my code – you can see them on the post above – but they are not being converted to code blocks. Any suggestions.

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    Don’t use CSS opacity if you don’t want child elements affected.
    Use a background image that has translucency instead.

    Thread Starter jgoldberg2013

    (@jgoldberg2013)

    thanks Andrew – so I have design and import various size blocks for about 30 headings that are transparent and set as background image within the `#widget-title-three h3′ ID.
    Please confirm – seems like a very long winded way, but I am not the expert here, just seems like a lot of work.

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    Can you first link the issue?

    Thread Starter jgoldberg2013

    (@jgoldberg2013)

    I am working off localhost so no link availible. Sorry.
    here is the issue reapeated many times on my site.
    widget text. html divided it into three divs. the whole box, the title box with an <h> inside and a text box.

    I have placed a opacity: 0.4; on a background-color: white; over an image
    which works great for the white box but the heading text has also been effected.
    I have even tried to create index-z levels but this won’t work with a <h>tag within a div. Unless I am missing something here.

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    Can you instead replicate the issue on CSSdesk and share us a link to that?

    Thread Starter jgoldberg2013

    (@jgoldberg2013)

    I did not kow that facility existed.
    had a qucik look and not sure what you require. I am working off resonsive them page template and child css for styling.
    Copying the html and css relating to this enquiry would not produce anything as it requires alot of other files being taged / linked to it. I think.
    Please advise how to go about providing CSSDesk so you can assist further. Many thanks.

    Thread Starter jgoldberg2013

    (@jgoldberg2013)

    OK Andrew – I have shared it – where it went I have no idea but it is out there for you to grab.
    If you remove the opacity you will see thatthe title goes back to black.

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    Along the top bar there’s an option named “SHARE” [screenshot]

    Press that and then link us the generated link

    Thread Starter jgoldberg2013

    (@jgoldberg2013)

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    I can’t see an issue on that CSSdesk page.

    Thread Starter jgoldberg2013

    (@jgoldberg2013)

    The <h3>BUYING & SELLING</h3> should be solid black but instead it has been opaqued.
    Backgrond color is white with 40% opaque applied.
    <h> is black – but it is not on the link or on my computer.
    Hope you understand now.
    I did find that if one uses top:4.7em it should sit ontop of the opaque block.
    Another is using a 1px x 1px transparent.png file and set it as background to <h> tag.

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    I see.

    Another is using a 1px x 1px transparent.png file and set it as background to <h> tag.

    Did you resolve the issue this way? The idea is to set a translucent image instead of the opacity on the element you want.

    Thread Starter jgoldberg2013

    (@jgoldberg2013)

    having difficultu creating a transulant.png file.
    I am using coreldraw and have create a 1 x 1 px squre and applied a 50% transaprent filter on it.
    Then exported as png with transparent background.

    Imported it into them and nothing shows up.
    QUESTION: How can a 1x1px transulent effect the whole div area, surely it would have to be the same size?

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    How can a 1x1px transulent effect the whole div area, surely it would have to be the same size?

    Fortunately in CSS background images repeat on both the X and Y axis automatically, meaning the 1px by 1px image would fill up the div area automatically, regardless of its size.

Viewing 15 replies - 1 through 15 (of 27 total)
  • The topic ‘opacity effected content’ is closed to new replies.