问题
I have an image inside a div. For example's sake, let's say this div has a background-color of #000. Now, I want this image to fade from the left, to the right.
What I mean is, the first column of pixels should appear to have 100% opacity, whilst the final column of pixels should appear to have 0/1% opacity (the final column of pixels will blend in with the background of the div).
How would I do this purely in CSS? The image will always be 50x50.
回答1:
you could overlay div on top of an image
and set gradient for div
http://tinkerbin.com/xXJQrgnk
回答2:
Do you always know the background color of the DIV ahead of time? Is it always a solid color (not a gradient, no texture, etc)? Are your images roughly the same width? If so, I'd create a PNG that is the same color as the background, and have it fade to totally transparent at the right side. It can be any height since we'll tile it verically.
Drop the PNG over the image after you give the PNG the same height as the image and it will appear that the image is fading out into the background.
来源：https://stackoverflow.com/questions/11991624/how-do-you-apply-a-fading-overlay-to-an-image-in-css