CSS3渐变图像到透明

Question

CSS3渐变图像到透明

css

5

请问CSS3中有没有办法在背景图像中进行图像到透明的渐变？

我尝试过这个链接中的方法：http://jsfiddle.net/meo/e95pw/3/

目标是在CSS3中实现镜像效果。

由于可能存在背景图像或图案，因此我找不出反射后面的背景颜色。

欢迎提供任何意见。

编辑我需要的是Photoshop图像蒙版，但是在CSS中实现。

- meo

4个回答

2

这不是CSS3，但可能会有所帮助：Reflection.js for jQuery 这个脚本适用于支持canvas标签的所有浏览器：Firefox 1.5+，Opera 9+，Safari 2+，Camino和Google Chrome。它还通过使用替代绘图技术在Internet Explorer 6+中工作。

反射可以添加到任何图像标记上，覆盖任何类型的背景（甚至是图像背景！）。

- Jeff Ogata

他们用画布来做这件事:/ 我希望有一个CSS解决方案。 - meo

@meo，只是好奇以防我将来想做这件事...从你的评论中，听起来这对你不起作用。最终你能使用它吗？还是它帮助你找到了如何做到这一点的方法？ - Jeff Ogata

在编程方面的内容，翻译为中文。仅返回翻译后的内容：就画布线缝的解决方案而言，这是最好的。即使我更喜欢纯CSS3的解决方案，在所有浏览器中都能正常工作。 - meo

2

这里有一个演示，展示了如何实现，http://duopixel.com/stack/test.html，请在 Webkit 和 Firefox 中查看。

解释：Firefox 中唯一遮罩图像的方法是通过 SVG 遮罩：https://developer.mozilla.org/En/Applying_SVG_effects_to_HTML_content。虽然可以更优雅地实现（使用来自外部源的 SVG），但这使其更易于理解。

实际代码非常简单，只需...

mask: url(#id);

如果您想引用外部资源：

mask: url(test.html#id);

此外，代码存储在我的服务器上，因为您必须将HTML作为XHTML提供，否则Firefox会忽略掩码。可以通过.htaccess完成此操作，如下所示：

RewriteEngine on
RewriteBase /
RewriteCond %{HTTP_ACCEPT} application/xhtml\+xml
RewriteCond %{HTTP_ACCEPT} !application/xhtml\+xml\s*;\s*q=0
RewriteCond %{REQUEST_URI} \.html$
RewriteCond %{THE_REQUEST} HTTP/1\.1
RewriteRule .* - [T=application/xhtml+xml]

jsfiddle无法提供xhtml/application服务。

- methodofaction

+1 我喜欢这个解决方案。但我想用它做一个 JQ 插件，所以页面不必作为 XHTML/应用程序提供并不是一个好的选择 :( 我希望有一个 CSS 解决方案。 - meo

1

你可以叠加背景！

下面的示例中，background-image 在白色到透明的线性渐变下叠加了一个图像 url。

我发现渐变应该是repeat，而url应该是no-repeat。

.multi_bg_example {
  background-image   :  linear-gradient(to right, rgb(255,255,255),  rgba(255, 255, 255, 0)),
                        url(http://i.imgur.com/wrRgmR7.jpg);

  background-repeat  : repeat,
                       no-repeat;

  background-position: right,
                       right;
}

文档：使用 CSS 多重背景的 Mozilla.org

- Blair Anderson

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Greg · Accepted Answer

您可以在纯CSS3中实现这一点： http://jsfiddle.net/g105b/xaX6r/

/* Example for webkit only */
img{
    margin: 0;
    padding: 0;
    -webkit-box-reflect: below 1px
    -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(0.4, transparent), to(white));
}