html - 使用 CSS3 将 JPG 图像淡化为透明

Question

我有一个.JPG没有透明度的实心图像 a （看到.JPG's 不能有 alpha 层）。但是，由于客户端无法创建将图像边缘淡化为透明的图像，因此他们希望输入一个实体.JPG并通过代码使其淡化。应该注意的是，我现在已经将此图像设置为background正确的，它不是src标签的<img>。这在 CSS3 中是否可行，如果可以，如何实现？

示例图片：

期望的结果：

Answer 1

您可以通过 CSS 遮罩获得真正的透明度：

http://www.webkit.org/blog/181/css-masks/

但是，对它的支持仍然非常有限。但是，在 Webkit 浏览器中，您可以使用以下内容：

.masked {
  -webkit-mask-image: -webkit-gradient(linear, left top, right top, from(rgba(0,0,0,1)), to(rgba(0,0,0,0)));
}

<div class="masked">Your content here</div>

这将适用于任何 div 中的所有内容（包括背景），但这在大多数浏览器中不起作用。

您可以使用类似于Nivo Slider的切片和动画方法，但对于最终可能不会成为有用效果的东西来说，这是一项非常艰巨的工作。

Answer 2

我相信你可以用CSS3 mask-image属性和 CSS3linear-gradient背景做一些事情：

-webkit-mask-image: -webkit-linear-gradient(left, rgba(0,0,0,1), rgba(0,0,0,0))

这是我为您创建的示例。由于它是一种新的CSS3兼容浏览器，目前是 Chrome 和 Safari（Webkit 浏览器）。

Answer 3

img,.over{
width:100px;
height:100px;
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIwIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmZmZmZmYiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(255,255,255,0)), color-stop(100%,rgba(255,255,255,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(left, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(left, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%); /* IE10+ */
background: linear-gradient(to right, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#ffffff',GradientType=1 ); /* IE6-8 */
position:absolute;
}​


<div  >
<img src="http://ts1.mm.bing.net/th?id=I.4763892546143716&pid=1.1" alt="test"/>
<div class="over"></div>
</div>

演示