Solved

Class Within A Class

Posted on 2013-05-23
4
249 Views
Last Modified: 2013-05-24
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

0
Comment
Question by:DS928
4 Comments
 
LVL 4

Expert Comment

by:mohammad827
ID: 39193388
define a class for image and assign it to IMG tag.
0
 
LVL 54

Accepted Solution

by:
Julian Hansen earned 500 total points
ID: 39193412
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
 
LVL 52

Expert Comment

by:Scott Fell, EE MVE
ID: 39194087
>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
 

Author Comment

by:DS928
ID: 39194614
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

Featured Post

NAS Cloud Backup Strategies

This article explains backup scenarios when using network storage. We review the so-called “3-2-1 strategy” and summarize the methods you can use to send NAS data to the cloud

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Styling your websites can become very complex. Here I'll show how SASS can help you better organize, maintain and reuse your CSS code.
CSS is a visual language used to classify objects and define rules about how they should be displayed. CSS skills aren’t restricted to developers anymore, there is a big benefit to having a basic understanding of the language, regardless of your occ…
In this tutorial viewers will learn how add a scalable full-width header using CSS3. Create a new HTML document with an internal stylesheet. Set a tiled background.:  Create a new div and name it Header. Position it with position:absolute at the top…
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…

810 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question