WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] opacity effected content (28 posts)

  1. jgoldberg2013
    Member
    Posted 11 months ago #

    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.

  2. jgoldberg2013
    Member
    Posted 11 months ago #

    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.

  3. Andrew Nevins
    Volunteer Moderator
    Posted 11 months ago #

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

  4. jgoldberg2013
    Member
    Posted 11 months ago #

    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.

  5. Andrew Nevins
    Volunteer Moderator
    Posted 11 months ago #

    Can you first link the issue?

  6. jgoldberg2013
    Member
    Posted 11 months ago #

    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.

  7. Andrew Nevins
    Volunteer Moderator
    Posted 11 months ago #

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

  8. jgoldberg2013
    Member
    Posted 11 months ago #

    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.

  9. jgoldberg2013
    Member
    Posted 11 months ago #

    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.

  10. Andrew Nevins
    Volunteer Moderator
    Posted 11 months ago #

    Along the top bar there's an option named "SHARE" [screenshot]

    Press that and then link us the generated link

  11. jgoldberg2013
    Member
    Posted 11 months ago #

  12. Andrew Nevins
    Volunteer Moderator
    Posted 11 months ago #

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

  13. jgoldberg2013
    Member
    Posted 11 months ago #

    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.

  14. Andrew Nevins
    Volunteer Moderator
    Posted 11 months ago #

    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.

  15. jgoldberg2013
    Member
    Posted 11 months ago #

    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?

  16. Andrew Nevins
    Volunteer Moderator
    Posted 11 months ago #

    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.

  17. Andrew Nevins
    Volunteer Moderator
    Posted 11 months ago #

    Perhaps you're not using the correct image path?
    Are you using Google Chrome?

  18. jgoldberg2013
    Member
    Posted 11 months ago #

    no locsalhost - IE7, got the box to show now as white, just have to figure out how to export a transulant image now.
    But it looks like your original answer was correct."Use a background image that has translucency instead." which is what I was trying avoind and see if I could learn some new tricky code.

  19. Andrew Nevins
    Volunteer Moderator
    Posted 11 months ago #

    Is this what you want to achieve http://cssdesk.com/wuUSc ?

  20. jgoldberg2013
    Member
    Posted 11 months ago #

    YES YES YES - whew, feel exusted now after that learning session.
    How did you get the transulent background.
    I have created a 50 transulant white block and exported as png in 8bit pallete.
    then saved with transparent background - but I keep getting a white block and not translucent.
    I feel you are my savier if you can explain this to me..

  21. Andrew Nevins
    Volunteer Moderator
    Posted 11 months ago #

    I have created a 50 transulant white block and exported as png in 8bit pallete.
    then saved with transparent background - but I keep getting a white block and not translucent.

    Sorry, I don't understand why you created 50 images.

  22. jgoldberg2013
    Member
    Posted 11 months ago #

    50% transparent white box - how did you do the black transparent in the link yous sent me - the one you edited of mine????

  23. Andrew Nevins
    Volunteer Moderator
    Posted 11 months ago #

    I uploaded a 1px by 1px white image at 50% opacity here
    http://img689.imageshack.us/img689/3913/testtransparency.png

    Use that.

  24. jgoldberg2013
    Member
    Posted 11 months ago #

    thanks man-finally figured it it out.
    convert image into bitmat first then export as png with transparent background.
    Thanks Andrew for stiking with me on this one.
    Surely there must still be an easier way in code.
    What about that suggestion of using the top: tag in css?
    Do you know anything about that???

  25. Andrew Nevins
    Volunteer Moderator
    Posted 11 months ago #

    What about that suggestion of using the top: tag in css?

    Can you sum up that question again? I can't find it.

  26. jgoldberg2013
    Member
    Posted 11 months ago #

    no problem: I did find in another forumn...that if one uses the top:4.7em it should sit ontop of the opaque block.
    this being applied to the <h> tag.
    did not try it.
    Anyway - thanks again. petty we went round in acomplete circle on this one.
    Until the next problem.

  27. Andrew Nevins
    Volunteer Moderator
    Posted 11 months ago #

    That sounds like someone is describing an alternative to using the translucent image. There is an alternative.

    The alternative is to move your <h3> element outside of your <div> that has your background image and then use absolute positioning to force the <h3> on top of the <div>.

    See this CSSdesk page for example http://cssdesk.com/zeNyr
    In that CSSdesk page, there is opacity applied to the <div> but the <h3> is not affected. The drawback to this is that it produces junk HTML and therefore may be disadvantaged to SEO.

  28. jgoldberg2013
    Member
    Posted 11 months ago #

    Thanks buddy 0 appeciate again all your time spend on this rather trivia thing. Hope others can learn from it as I have.
    Have a great eveing - wherever you are.

Reply

You must log in to post.

About this Topic