tl;博士
是否有任何方法可以在图像的左侧和右侧 -webkit-linear-gradient
为CSS中的图像添加透明度?
长版
我有一个图像,我想添加透明度 - 纯CSS - 避免使用任何图像编辑器,如Photoshop,Gimp等 . 我试图使用 -webkit-linear-gradient
但它使用rgba()函数来定义颜色停止 .
所以这个片段
height: 200px;
background: -webkit-linear-gradient(left, rgba(255,0,0,0), rgba(255,0,0,1));
做这个:
在此示例中,rgba()中的最后一个参数定义颜色的透明度 . 到现在为止还挺好 . 如果我将 right
放在 -webkit-linear-gradient
中,则上图将显示相反的情况 . (你不说?!)
我想以某种方式将两者合并,并创建一个两边透明的渐变 . 只有不用渐变 . 带图像 .
我也尝试使用 box-shadow
和 radial-gradient
,但我无法理解 .
Is there any possible way to add transparency on left, and right side of an image using only CSS?
编辑:
示例:
1 回答
您可以使用包装器div然后使用颜色停止:
Resources