小编bal*_*ker的帖子

我想使用CSS为图像赋予圆形不透明度.

我知道我可以在这样的图像上实现不透明度:

.circle img {
    opacity: 0.4;
    filter: alpha(opacity=40);
}

我知道我可以实现这样的圆形图像:

.circle {
    border-radius: 50%;
    display: inline-block;
}
.circle img {
    border-radius: 50%;
    display: block;
}

我想以某种方式合并上面的两件事并仅对图像的边缘应用不透明度,因此图像的中心几乎不会从不透明度标签中获取任何内容.我搜索了几个小时但什么也没找到.

没有不透明度:http://jsfiddle.net/8w6szf84/47

不透明度:http://jsfiddle.net/8w6szf84/48/ - >不透明度差,只想边缘消失...

我需要在这上面使用Javascript吗？有什么建议？

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但我无法弄明白.

有没有办法只使用CSS在图像的左侧和右侧添加透明度？

编辑:

例:

我有一个轻微的旋转木马,我想启用autoPlay.当轮播在自动播放时,我想通过分组细胞groupCells: true.到现在为止还挺好.当用户点击上一个或下一个按钮时,我希望滑块只移动1个单元格,因此当用户单击时,groupCells应该是false.

我的选择:

pageDots: false,
imagesLoaded: true, 
autoPlay: true, 
pauseAutoPlayOnHover: false,
wrapAround: true, 
groupCells: true,
selectedAttraction: 0.01

我想在页面顶部创建一条无法缩放的行.既不是行,也不是包含在其中的文本.主要问题是文本.每当我放大浏览器时,线条保持相同的高度,但其中的文字会增长,并从线条中消失.

有什么css命令我可以使用什么？

我已经尝试过font-size-adjust: none;,-webkit-text-size-adjust: none;但没有一个能奏效.

这是我试图做的小提琴.