Sat, 2015-10-24 12:17
Good day guys and girls, i created two div tags and an image tag as shown below;
<div class="BackOpacityLayer"> <div class ="CentreDiv"> <img src="~/Images/nsmn-logo.gif" alt="logo" width="250" height="250"/> </div> </div>
the "BackOpacityLayer" css style code is shown below;
.BackOpacityLayer { width: 100%; /**/height: 450px; margin: -10px 0px -10px 0px; background-color: black; opacity: 0.8; filter: alpha(opacity=50); padding: 15% 0px 0px 0px; }
the div "CentreDiv" and the image inside inherits same opacity, but i don't want the image to inherit the opacity, how do i do that please?
Mon, 2015-10-26 03:48
#1
Not quite
§3.2. Transparency: the ‘opacity’ property
Opacity can be thought of as a postprocessing operation. Conceptually, after the element (including its descendants) is rendered into an RGBA offscreen image, the opacity setting specifies how to blend the offscreen rendering into the current composite rendering. See simple alpha compositing for details.
In a nutshell, you may set the bg transparency in an element, then overlay it with a sibling or cousin element. You cannot expect a dependent to be more opaque than its ancestor.
Example:
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta name="viewport" content="width=device-width; height=device-height; initial-scale=1"> <title> Test document </title> <style type="text/css"> /*<![CDATA[*/ body { background-color: white; color: black; font: 100%/1.5 sans-serif; margin: 0; padding: 1.5em;} p { font-size: 1em;} #holder { position: relative;} #bg-opacity { background-color: black; color: white; height: 200px; opacity: 0.5; width: 200px} #test { background-color: white; color: black; height: 180px; left: 10px; position: absolute; top: 10px; width: 180px;} .BackOpacityLayer { height: 200px; width: 200px; margin: 1.5em 0; background-color: black; color: white; opacity: 0.5; padding: 1px 0;} .CentreDiv { background-color: white; color: black; height: 180px; margin: 10px; padding: 1px 0; width: 180px;} /*]]>*/ </style> </head> <body> <div id="holder"> <!-- empty div for bg color --> <div id="bg-opacity"> </div> <div id="test"> <p>This is a test. It should not be partially transparent.</p> </div> </div> <div class="BackOpacityLayer"> <div class ="CentreDiv"> <p> This is the control, the text should be partially transparent. </p> </div> </div> </body> </html>
cheers,
gary
Thu, 2015-10-29 11:06
#2
How to remove opacity from an Image
As the other answers state, this is not possible using opacity, that is, with this method.
A workaround/hack would be to add position: relative; z-index:2; to the parent element contentContainer. Then to add another element which has the opacity and other stuff on it. This is particularly useful if you have an image as the background
So your markup should look a little like this:
HTML
<div id="contentContainer"> Content ... <img src="..." alt="Photo" /> <span id="contentBackground"></span> </div>
CSS
#contentContainer { position: relative; z-index 2; } #contentBackground { position: absolute; display: block; z-index: 1; top: 0; right: 0; bottom: 0; left: 0; background: /* stuff */; }
Note the z-index property. These are important for making sure that the background element sits below the parent and doesn't overlap the content preventing click events.
This method could also be used with pseudo elements (:before or :after) for which you'd need to add content.
//mod edit: BBCode added to source blocks. Spam links removed. ~gt
Thu, 2015-10-29 17:10
#3
I misread the OP's intent (I think)
Since the opacity property applies to an element whose only content is another container with an image, you need only the image's parent, like so:
<div class="image-holder"> <img src="pic.jpg"> </div>
.image-holder { background-color: rgba(0, 0, 0, 0.8); }
cheers,
gary