Support » Themes and Templates » opacity effected content

  • 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)
  • 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.

    Moderator Andrew Nevins

    (@anevins)

    Forum moderator

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

    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.

    Moderator Andrew Nevins

    (@anevins)

    Forum moderator

    Can you first link the issue?

    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.

    Moderator Andrew Nevins

    (@anevins)

    Forum moderator

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

    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.

    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.

    Moderator Andrew Nevins

    (@anevins)

    Forum moderator

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

    Press that and then link us the generated link

    jgoldberg2013

    (@jgoldberg2013)

    Moderator Andrew Nevins

    (@anevins)

    Forum moderator

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

    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.

    Moderator Andrew Nevins

    (@anevins)

    Forum moderator

    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.

    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?

    Moderator Andrew Nevins

    (@anevins)

    Forum moderator

    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.