Class Within A Class

I have an image within a div.  The div is fairly transparent, however I don't waht the image in the div to be transparent.  Right now the image is currently taking on the attributes of the div.

<div class="container">
  <div class="content">
    <h1 align="left"><img src="Images/Page_Backgrounds/FlipBack.png" width="211" height="276" class="None" alt="Head" /></h1>
    </div>
    </div>

Open in new window

DS928Asked:
Who is Participating?
 
Julian HansenConnect With a Mentor Commented:
The reason for this is that the image is inside the div and will inherit its parents opacity.

One solution is to position the image over the div i.e
.container {
 position: relative;
 width: 500px;
  height: 500px;
}

#transparent-div {
  position: absolute;
  height: 100%;
  width: 100%;
  z-index: 1;
  background: blue;
  opacity: .75;
}
img {
	z-index: 100;
	position: absolute;
}

<div class="container">
   <div id="transparent-div"></div>
   <img src="images/00100.jpg" />
</div>

Open in new window

0
 
mohammad827Commented:
define a class for image and assign it to IMG tag.
0
 
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
>I don't waht the image in the div to be transparent
Open up the image in your favorite image editing software and Save As/Export as a jpeg file or remove the transparency in the png.   But no use having a png if you don't need the transparency as the jpg will be smaller file.
0
 
DS928Author Commented:
I'm using the png because the background of the image is transparent, but the image itself should not be.  Tryimh above solution, now.  Thank you.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.