Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Aug 2012
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    how to use opacity on a transparent PNG24 in IE

    hello,

    i have an image i create with some shadow and when i hover over it i want to set the opacity to 0.8 but..

    when i do this the shadow fills in black as i am using the

    Code:
     filter:Alpha(opacity=50);
    i searched like hell and found that you can fix the PNG24 issue in IE by using

    Code:
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/Images/login_loginpress.png', sizingMethod='crop');
    background-image:url(/Images/login_loginpress.png) 0 0 no-repeat;
    so i have put it in and it hasn't worked.
    with this i have also tried
    -the src with no speech marks.
    -just the image name not the whole path.
    -in the html as a <img> and a <div>
    -with and with out the '0 0 no-repeat;'

    but it still doesn't work.

    can anyone show me how it should look in the html side and the css side.
    i want to try not to use php or java/jquery but if it is needed then i will.

  • #2
    Senior Coder
    Join Date
    Apr 2011
    Location
    London, England
    Posts
    2,120
    Thanks
    15
    Thanked 354 Times in 353 Posts
    Try:

    Code:
    filter: alpha(opacity=50);
    
    -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/Images/login_loginpress.png', sizingMethod='crop')";
    but you might need to show more of your css-code.
    "I'm here to save your life. But if I'm going to do that, I'll need total uninanonynymity." Me Myself & Irene.
    Validate your HTML and CSS

  • #3
    New to the CF scene
    Join Date
    Aug 2012
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    ok here is the css and html for the code.

    html
    Code:
    <img src="Images/login_loginpress.png" alt="" class="loginpress"/>
    i have also tried this html in a div and gave the css a background image of the image.
    Code:
    <div class="loginpress"></div>
    css
    Code:
    .loginpress
    {
    float: left;
    width: 85px;
    height: 35px;
    margin-top: 7px;
    margin-left: 45px;
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/Images/login_loginpress.png', sizingMethod='crop');
    background-image:url(/Images/login_loginpress.png) 0 0 no-repeat;/*when i used a div i used this*/
    }
    
    .loginpress:hover
    {
        filter:Alpha(opacity=50);
    }
    hope this helps please


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •