反射梯度

Question

我具有用于显示其使用-webkit梯度的元件上的反射到淡出一些CSS：

.foo { -webkit-box-reflect: below 0 -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 0)), to(rgba(255, 255, 255, 0.5)), color-stop(0.7, transparent)); } 

• 在支持浏览器-webkit-箱反映如铬，这显示了如预期逐渐淡化的元素的反射。
• 在不支持它的浏览器上，没有反射显示。

但是，在Android的浏览器上显示反射，但不会淡出。

有越来越的Android任的任何方式：

1. 淡出的反射，或
2. 没有显示的反射都没有。

我知道我可以使用JavaScript来检测浏览器，并相应地改变风格，但我更喜欢一个唯一的CSS的解决方案。

Answer 1

CSS不是为了处理这样的东西而设计的。换句话说：不，这是不可能的。

Answer 2

我有类似的问题试图做背景梯度东西，在Android浏览器，它似乎完全不支持

不幸的是，上面的回答是正确的，有没有一种方式，来分割你的声明了一个不错的逐渐增强的方式。您可以像您提到的那样使用JavaScript/modernizr，并且至少设置一个支持类（es），以便您实际上不必在代码中翻转样式。

您可以尝试使用HTML画布元素来重现此效果，在图像中使用drawImage并对其进行变形。尽管移动webkit中的canvas可能会很慢。

祝你好运

Answer 3

在Android浏览器中所有的梯度都可以工作吗？ 如果他们这样做，请确保您使用的是正确的版本。您可能需要使用旧的webkit格式。 如果没有，只需使用modernizr将其隐藏在不支持渐变的地方。

Answer 4

没有示例文件或链接，就很难看到你需要什么。

几个月前，我也玩过一些反射的东西，没有找到任何可以做你描述的东西。在代码之外，我有一些步骤可以让你得到你想要的。我建议您希望反映的项目是透明背景上的PNG，以开始。

的步骤： 1.Take图像成自己喜欢的图像处理程序（实施例的Photoshop）

1. 双人或延伸帆布必要量的图像以包括在适当的方向上的反射
2. 复制图层（Photoshop图层/复制图层）
3. 反映图像。（Photoshop的层/图像旋转/翻转画布（您的方向））
4. 移动复制层，使得其使用移动工具
5. 选择侯爵工具显示为一个反射镜，和边缘模糊设定为约您的原始图像宽度的50％。
6. 将光标悬停在“反映”层，如果说选择线将不可见的，除非它说选择什么也不用担心。如果没有选择任何内容，请将您的边缘模糊度降至25％左右，然后重试。
7. 有选择一旦你，无论是可见或不可见，删除所选区域。这应该给你一个“反映”的样子。
8. 如果需要的话，下面的一切图层上添加一个背景。
9. 保存图片为JPG，如果你没有一个透明的背景或PNG，如果你做的事。使用它代替您反映的图像和代码淡化的图像。这将主要是浏览器兼容。