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

此页面http://wildlife.x-tremeteam.com利用CSS border-image属性和具有透明边缘的.png图像在我的div上创建“撕碎的纸张”外观。除了我的Android（三星SIII），无论我使用的是默认浏览器还是Chrome应用程序，它都很棒。在这一点上，我可以看到20px边框内外的细微边缘。有趣的是，我没有看到角落的边缘。带边框的div背景是透明的。我只将背景颜色应用到div里面。具有透明图像的CSS边框图像在Android上显示边缘

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

它必须与div的背景颜色属性有关，因为如果我将其设置为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; 
}

谢谢，我一直在盯着这几个小时，不能弄明白。

来源

2015-11-30 Robin B

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

这是border-image属性的REPEAT值。

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

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

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

来源

2016-01-07 19:31:16

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

回答

相关问题