Question

此页面http://wildlife.x-tremeteam.com利用CSS border-image属性和带有透明边缘的.png图像来创建“撕裂的纸张”＃34;看看我的divs。除了我的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;
}

谢谢，我已经盯着这几个小时了，无法弄清楚。

Answer 1

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

这是border-image属性的REPEAT值。

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

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

我使用STRETCH修复了它，而不是更小的媒体查询。我不喜欢它，但那是有效的。

带有透明图像的CSS边框图像在Android上显示出优势

1 个答案: