5

我有一些 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 解决方案。

4

4 回答 4

1

Without an example file or link, it is a little difficult to see what you need.

I also played with some reflection stuff a few months ago and didn't find anything that could do what you describe. I have some steps to get you what you want, outside of code. I recommend the item you wish to reflect be a PNG on a transparent background, to start.

The steps: 1.Take the image into your favorite image manipulation program (ex. Photoshop)

  1. Double or extend the image canvas the necessary amount to include the reflection in the appropriate direction
  2. Duplicate the layer (Photoshop-Layer/Duplicate Layer)
  3. Reflect the image. (Photoshop-Layer/Image Rotation/Flip Canvas (your direction))
  4. Move the duplicated layer such that it appears as a mirror using the Move tool
  5. Select the Marquis tool, and set the edge blur to about 50% of your original image width.
  6. Drag your cursor over the "reflected" layer, don't worry if it says the selection lines won't be visible, unless it says nothing was selected. If it says nothing was selected, reduce your edge blur to about 25% and try again.
  7. Once you have a selection, be it visible or not, delete the selected area. This should give you a "reflected" look.
  8. If desired, add a background on a layer below everything else.
  9. Save your image as a jpg if you don't have a transparent background or a png if you do. Use it in place of the image you were reflecting and fading with code. This will be mostly browser compatible.
于 2012-10-25T14:10:02.943 回答
0

CSS 不是为处理这样​​的事情而设计的。换句话说：不，这是不可能的。

于 2011-08-16T19:28:31.830 回答
0

我在尝试在 Android 浏览器中处理背景渐变时遇到了类似的问题，而且它似乎完全不受支持

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

您可以尝试使用 HTML 画布元素重现此效果，将 drawImage 与您的图像一起使用并对其进行转换。虽然画布在移动 webkit 中可能很慢。

祝你好运

于 2011-09-07T21:17:46.620 回答
0

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

于 2012-10-20T19:49:47.250 回答