0

此页面http://wildlife.x-tremeteam.com利用 CSS 边框图像属性和具有透明边缘的 .png 图像在我的 div 上创建“撕纸”外观。除了在我的 Android（三星 SIII）上，无论我使用的是其默认浏览器还是 Chrome 应用程序，它都能很好地工作。在那我可以看到 20px 边框的内侧和外侧有轻微的边缘。有趣的是，我没有看到角落的边缘。带边框的 div 的背景是透明的。我只对其中的 div 应用背景颜色。

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

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

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;
}

谢谢，我一直盯着这个几个小时，无法弄清楚。

4

1 回答 1

0

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

它是边框图像属性的重复值。

在对不同颜色的图像和 div 进行大量测试后，我意识到所有四个边（不是角）也在另一个/错误的方向上略微重复。因此，当我的图像是一个外侧边缘透明的橙色盒子时，外侧边缘会重复出现一小片橙色。它没有发生在 iPhone 6 上，只是 Android 和可能更旧的 iPhone。

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

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

于 2016-01-07T19:31:16.157 回答