3 replies [Last post]
EasyCodes
EasyCodes's picture
Offline
newbie
Nigeria
Last seen: 5 years 3 days ago
Nigeria
Timezone: GMT+1
Joined: 2015-10-24
Posts: 1
Points: 2

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?

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 1 day 1 hour ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9772
Points: 3854

Not quite

Quote:

§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">&nbsp;
      </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

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

dwarak17
dwarak17's picture
Offline
newbie
Last seen: 4 years 51 weeks ago
Timezone: GMT+5.5
Joined: 2015-10-29
Posts: 1
Points: 1

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

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 1 day 1 hour ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9772
Points: 3854

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

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.