How to give outer glow to an object in a transparent png using CSS3?

后端 未结 7 2045
谎友^
谎友^ 2021-02-02 06:03

I\'m working on a project where I need to make modifications in more then 500 images to give outerglow on hover effect. I will need to modify each image to give

7条回答
  •  不思量自难忘°
    2021-02-02 06:30

    If you have to do this to 500+ images, what I would do is great a transparent PNG of the inverse of the bottle with feathered edges around the bottle and lay that over a DIV with the background color under it and the bottle image in between. This will make the solid background color appear to fade out into the inverse bottle PNG and all you would have to do to change the glow color is change the value of the CSS.

    Write some jQuery to let you enter the HEX value and you're set ;)

    EDIT *

    Problem solved!

    http://phillipjroth.com/stackoverflow/8693733/index.html

    Edit line 19 of the CSS code "background-color" and it will update the glow. The PNG's are low quality but you can fine tune them to get rid of the ridged edges.

提交回复
热议问题