Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 203
  • Last Modified:

setting image opacity to overlay on top of another image

I have circular 153x153 images such as this one:


...then I have wedge-shaped, transparent PNGs which correspond to percentages, this one is 50%:


So that graphic should be a half-circle in white, with the rest transparent. In the attached code, I have a DIV with a background image displaying (the bowling ball), then inside the DIV I put the half-circle. I gave the image a class "wedge" which is opacity:50 in the CSS.

However, I can't get the half-circle to become transparent... it appears just as a full-value image, with the half-circle completely blocking out the background image.

Is there something about the way I am trying to do this that is incorrect? Thank you!
<style type="text/css">
.bowling{background:#ffffff url("art/gr_goals-progress-bowling.jpg") no-repeat center top;width:153px;height:153px;}

<div class="bowling"><img class="wedge" src="art/gr_goals-wedge-50.png" alt="" width="153" height="153" border="0"></div>

Open in new window

  • 2
1 Solution
You will find that opacity needs to be set between 0-1 where as you have set it to 50, so when u mean 50 it has to be actually .5.

Hope this helps

bbdesignAuthor Commented:
Ah, thank you!

Featured Post

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now