Go Premium for a chance to win a PS4. Enter to Win

x
?
Solved

Class Within A Class

Posted on 2013-05-23
4
Medium Priority
?
255 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 60

Accepted Solution

by:
Julian Hansen earned 2000 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 54

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

Keep up with what's happening at Experts Exchange!

Sign up to receive Decoded, a new monthly digest with product updates, feature release info, continuing education opportunities, and more.

Question has a verified solution.

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

As a result of several questions about how to use Bootstrap I thought it would be a good idea to write down the development aspect of creating a Bootstrapped website in as little time as possible. Part 1 of this article will only concentrate on g…
When writing CSS, there are a few simple rules that will make your life easier.    1. Using ‘* {box-sizing:border-box;}’. Using this will wrap all your elements in a nice little compact box-model that will give you the width you want, like so... …
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).
Suggested Courses

916 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