Title: opacity effected content Last modified: August 21, 2016 --- # opacity effected content * Resolved [jgoldberg2013](https://wordpress.org/support/users/jgoldberg2013/) * (@jgoldberg2013) * [13 years ago](https://wordpress.org/support/topic/opacity-effected-content/) * 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:`

HOW TO EXCHANGE

` * 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) 1 [2](https://wordpress.org/support/topic/opacity-effected-content/page/2/?output_format=md) [→](https://wordpress.org/support/topic/opacity-effected-content/page/2/?output_format=md) * Thread Starter [jgoldberg2013](https://wordpress.org/support/users/jgoldberg2013/) * (@jgoldberg2013) * [13 years ago](https://wordpress.org/support/topic/opacity-effected-content/#post-3721312) * 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](https://wordpress.org/support/users/anevins/) * (@anevins) * WCLDN 2018 Contributor | Volunteer support * [13 years ago](https://wordpress.org/support/topic/opacity-effected-content/#post-3721314) * Don’t use CSS opacity if you don’t want child elements affected. Use a background image that has translucency instead. * Thread Starter [jgoldberg2013](https://wordpress.org/support/users/jgoldberg2013/) * (@jgoldberg2013) * [13 years ago](https://wordpress.org/support/topic/opacity-effected-content/#post-3721319) * 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](https://wordpress.org/support/users/anevins/) * (@anevins) * WCLDN 2018 Contributor | Volunteer support * [13 years ago](https://wordpress.org/support/topic/opacity-effected-content/#post-3721323) * Can you first link the issue? * Thread Starter [jgoldberg2013](https://wordpress.org/support/users/jgoldberg2013/) * (@jgoldberg2013) * [13 years ago](https://wordpress.org/support/topic/opacity-effected-content/#post-3721327) * 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 `` 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 `` tag within a div. Unless I am missing something here. * [Andrew Nevins](https://wordpress.org/support/users/anevins/) * (@anevins) * WCLDN 2018 Contributor | Volunteer support * [13 years ago](https://wordpress.org/support/topic/opacity-effected-content/#post-3721329) * Can you instead replicate the issue on [CSSdesk](http://cssdesk.com) and share us a link to that? * Thread Starter [jgoldberg2013](https://wordpress.org/support/users/jgoldberg2013/) * (@jgoldberg2013) * [13 years ago](https://wordpress.org/support/topic/opacity-effected-content/#post-3721338) * 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](https://wordpress.org/support/users/jgoldberg2013/) * (@jgoldberg2013) * [13 years ago](https://wordpress.org/support/topic/opacity-effected-content/#post-3721348) * 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](https://wordpress.org/support/users/anevins/) * (@anevins) * WCLDN 2018 Contributor | Volunteer support * [13 years ago](https://wordpress.org/support/topic/opacity-effected-content/#post-3721359) * Along the top bar there’s an option named “SHARE” [[screenshot]](http://snag.gy/blazQ.jpg) * Press that and then link us the generated link * Thread Starter [jgoldberg2013](https://wordpress.org/support/users/jgoldberg2013/) * (@jgoldberg2013) * [13 years ago](https://wordpress.org/support/topic/opacity-effected-content/#post-3721360) * [http://cssdesk.com/Jd7wd](http://cssdesk.com/Jd7wd) * [Andrew Nevins](https://wordpress.org/support/users/anevins/) * (@anevins) * WCLDN 2018 Contributor | Volunteer support * [13 years ago](https://wordpress.org/support/topic/opacity-effected-content/#post-3721362) * I can’t see an issue on that CSSdesk page. * Thread Starter [jgoldberg2013](https://wordpress.org/support/users/jgoldberg2013/) * (@jgoldberg2013) * [13 years ago](https://wordpress.org/support/topic/opacity-effected-content/#post-3721366) * The `

BUYING & SELLING

` should be solid black but instead it has been opaqued. Backgrond color is white with 40% opaque applied. 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 `` tag. * [Andrew Nevins](https://wordpress.org/support/users/anevins/) * (@anevins) * WCLDN 2018 Contributor | Volunteer support * [13 years ago](https://wordpress.org/support/topic/opacity-effected-content/#post-3721368) * I see. * > Another is using a 1px x 1px transparent.png file and set it as background > to 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](https://wordpress.org/support/users/jgoldberg2013/) * (@jgoldberg2013) * [13 years ago](https://wordpress.org/support/topic/opacity-effected-content/#post-3721374) * 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](https://wordpress.org/support/users/anevins/) * (@anevins) * WCLDN 2018 Contributor | Volunteer support * [13 years ago](https://wordpress.org/support/topic/opacity-effected-content/#post-3721378) * > 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) 1 [2](https://wordpress.org/support/topic/opacity-effected-content/page/2/?output_format=md) [→](https://wordpress.org/support/topic/opacity-effected-content/page/2/?output_format=md) The topic ‘opacity effected content’ is closed to new replies. ## Tags * [heading](https://wordpress.org/support/topic-tag/heading/) * [opacity](https://wordpress.org/support/topic-tag/opacity/) * 27 replies * 2 participants * Last reply from: [jgoldberg2013](https://wordpress.org/support/users/jgoldberg2013/) * Last activity: [13 years ago](https://wordpress.org/support/topic/opacity-effected-content/page/2/#post-3721438) * Status: resolved ## Topics ### Topics with no replies ### Non-support topics ### Resolved topics ### Unresolved topics ### All topics