setting image opacity to overlay on top of another image

Posted on 2011-10-12
Last Modified: 2012-05-12
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

Question by:bbdesign
    LVL 9

    Expert Comment

    LVL 9

    Accepted 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


    Author Comment

    Ah, thank you!

    Write Comment

    Please enter a first name

    Please enter a last name

    We will never share this with anyone.

    Featured Post

    Course: Create Mobile App Prototypes with Adobe XD

    This is a project-based course: we go through all the steps of creating a prototype from start to finish, using all the tools and features currently available in Adobe XD. You can complete the course in less than a day, plus all project files and fonts are included.

    "I want to put my photos online, but I don't want them stolen.  What settings should I use?" When You Put Photos Online First and foremost, any digital file published on the WWW can be copied, stored, modified, retransmitted, etc.  Remember Naps…
    Browsers only know CSS so your awesome SASS code needs to be translated into normal CSS. Here I'll try to explain what you should aim for in order to take full advantage of SASS.
    In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …
    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 Browse or search based on font properties or name to find a suitable font for…

    758 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

    Need Help in Real-Time?

    Connect with top rated Experts

    13 Experts available now in Live!

    Get 1:1 Help Now