如何在CSS中的图片上应用淡入淡出重叠式广告？ [英] How do you apply a fading overlay to an image in CSS?

问题描述

我有一个 div 里的图片。例如，让我们说这个div有 background-color ＃000 。现在，我想让这张图片从左边向右边淡出。

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.

我的意思是，第一列像素应该显示为100％不透明度，而最后一列像素应显示为0/1％不透明度（最后一列像素将与div的背景混合）。

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).

我如何在CSS中纯粹这样做？图片总是50x50。

How would I do this purely in CSS? The image will always be 50x50.

推荐答案

您可以在图片上重叠div
，并为div设置渐变
http://tinkerbin.com/xXJQrgnk

you could overlay div on top of an image and set gradient for div http://tinkerbin.com/xXJQrgnk

这篇关于如何在CSS中的图片上应用淡入淡出重叠式广告？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！