在Android浏览器中使用CSS的反射渐变

Question

我有一些 CSS 用于在使用 -webkit-gradient 淡出的元素上显示反射：

.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-box-reflect 的浏览器（例如 chrome）上，这会显示元素的反射，该元素会按预期逐渐淡出。
• 在根本不支持它的浏览器上，不会显示任何反射。

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

有没有办法让 Android 要么

1. 淡出反射，要么
2. 根本不显示反射。

我知道我可以使用 javascript 来检测浏览器并相应地更改样式，但我更喜欢仅 CSS 的解决方案。

Answer 1

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

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

步骤：
1.将图像导入您最喜欢的图像处理程序（例如 Photoshop） 将

1. 图像画布加倍或扩展必要的量，以包括适当方向的反射
2. 复制图层（Photoshop 图层/复制图层）
3. 反射图像。 （Photoshop 图层/图像旋转/翻转画布（您的方向））
4. 使用“移动”工具移动复制的图层，使其显示为镜子。
5. 选择 Marquis 工具，并将边缘模糊设置为大约 50原始图像宽度的%。
6. 将光标拖动到“反射”图层上，如果它说选择线不可见，请不要担心，除非它说没有选择任何内容。如果提示未选择任何内容，请将边缘模糊减少到 25% 左右，然后重试。
7. 一旦做出选择，无论其可见与否，都可以删除所选区域。这应该会给你一个“反射”的外观。
8. 如果需要，可以在其他图层下方的图层上添加背景。
9. 如果没有透明背景，请将图像另存为 jpg 格式；如果有透明背景，则将图像另存为 png 格式。使用它来代替您用代码反射和淡化的图像。这将主要与浏览器兼容。

Answer 2

CSS 的设计初衷并不是为了处理类似的事情。换句话说：不，这是不可能的。

Answer 3

我在尝试在 Android 浏览器中使用背景渐变做事情时遇到了类似的问题，并且它似乎完全不受支持

不幸的是上面的答案是正确的，没有办法以一种很好的逐步增强的方式分割您的声明。您可以像您提到的那样使用 JavaScript/modernizr，并且至少设置一个支持类，这样您实际上不必在代码中翻转样式。

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

祝你好运

Answer 4

渐变在 Android 浏览器中起作用吗？
如果这样做，请确保您使用的是正确的版本。您可能需要使用旧的 webkit 格式。
如果没有，就用modernizr把它隐藏在不支持渐变的地方。