CSS 带透明图像的边框图像在 Android 上显示边缘

Question

此页面 http://wildlife.x-tremeteam.com 使用 CSS 边框图像属性和具有透明边缘的 .png 图像在我的 [=31] 上创建 "torn paper" 外观=]秒。除了我的 Android (Samsung SIII)，无论我使用的是它的默认浏览器还是 Chrome 应用程序，它都很好用。在上面我可以看到 20px 边框内外的轻微边缘。有趣的是，我没有看到角落的边缘。带边框的 div 的背景是透明的。我只对里面的 div 应用背景颜色。

我桌面上的浏览器，我用于测试的 iPhone 和 responsinator.com 上的所有渲染都不显示图像的边缘。

它一定与 div 的背景色属性有关，因为如果我将其设置为红色，边缘就会变成红色。但是，使此属性透明不会将其删除。

CSS 如下，其中还包括默认的 div 属性，但没有帮助：

div {border: 0; border-style: none; }

.BoxGrunge {  
    border-color: #7777777; /* this won't really be seen */
    border-style: double;/* this won't really be seen */
    border-width: 20px 20px 20px 20px;
    -webkit-border-image: url(images/RippedEdgeWhiteTrans.png) 20 20 20 20 repeat;
    -moz-border-image: url(images/RippedEdgeWhiteTrans.png) 20 20 20 20 repeat;
    border-image: url(images/RippedEdgeWhiteTrans.png) 20 20 20 20 repeat;
    background-color: transparent; /* otherwise there is a white edge on Android */  /*THIS DOESN'T HELP */
    display: block !important;
    margin: 0 0 5px 0;
}

谢谢，我已经盯着这个看了好几个小时了，想不通。

Answer 1

我终于自己找到了。大多数。

这是 border-image 属性的重复值。

在对不同颜色的图像和 div 进行多次测试后，我意识到所有四个边（不是角）也在 other/wrong 方向上略微重复。因此，当我的图像是一个外边缘透明的橙色盒子时，外边缘会重复出现一小条橙色。它没有发生在 iPhone 6 上，只是 Android 并且可能更早 iPhones.

换句话说，对于顶部，图像会根据需要水平重复。但它也在垂直方向上重复了一点点。我猜这是某种 Android 错误。

我通过使用 STRETCH 而不是较小的媒体查询来修复它。我不喜欢它，但这就是它的作用。

CSS 带透明图像的边框图像在 Android 上显示边缘

CSS border-image with transparent image shows an edge on Android

css

transparency

android

border-image