具有透明图像的CSS边框图像在Android上显示出边缘 [英] CSS border-image with transparent image shows an edge on Android

问题描述

此页面 http://wildlife.x-tremeteam.com 利用了CSS border-image属性和具有透明边缘的.png图像在我的div上创建撕纸"外观.无论我使用的是默认浏览器还是Chrome应用程序，它都可以在我的Android(三星SIII)上运行，但效果很好.这样，我可以看到20px边框的内部和外部都有轻微的边缘.有趣的是，我看不到角落的边缘.带有边框的div的背景是透明的.我只将背景色应用于其中的div.

This page http://wildlife.x-tremeteam.com utilizes the CSS border-image property and a .png image with a transparent edge to create a "torn paper" look on my divs. It works great except on my Android (Samsung SIII), whether I'm using its default browser or the Chrome app. On that I can see a slight edge on the inside and outside of the 20px border. Interestingly, I do not see the edge on the corners. The background of the div with the border is transparent. I only apply a background color to the div inside that.

我的台式机上的浏览器，用于测试的iPhone和responsinator.com上的所有渲染均不显示图像的边缘.

Browsers on my desktop, the iPhone I use for testing and all renderings on responsinator.com don't show the edge of the image.

它必须与div的background-color属性有关，因为如果将其设置为RED，则边缘的确会变成红色.但是，使此属性透明不会删除它.

It must have something to do with the div's background-color property because if I set that to RED, the edges do turn red. However, making this property transparent won't remove it.

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

CSS is as follows, which also includes a default div property which did not help:

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

谢谢，我已经盯着这个看了好几个小时了，无法弄清.

Thanks, I have been staring at this for hours and can't figure it out.

推荐答案

我终于找到了它.通常.

I finally found it myself. Mostly.

这是边框图像属性的REPEAT值.

It was the REPEAT value of the border-image properties.

在对不同颜色的图像和div进行了大量测试之后，我意识到所有四个侧面(不是角落)也在另一个方向或错误的方向上略有重复.因此，当我的图像是一个在外部边缘透明的橙色盒子时，在外部边缘上会重复出现一小段橙色. iPhone 6并没有发生这种情况，只有Android以及可能是较旧的iPhone才发生这种情况.

After much testing with images and divs of different colors, I realized that all four sides (not the corners) were being slightly repeated in the other/wrong direction as well. So when my image was an orange box that was transparent at the outside edges, a tiny sliver of orange was being repeated on the outside edge. It did not happen on iPhone 6, just Android and possibly older iPhones.

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

In other words, for the top, the image was being repeated horizontally as needed. But it also repeated vertically just a little bit. I am guessing this is some sort of Android bug.

我通过使用STRETCH而不是较小的媒体查询来修复它. 我不喜欢它，但是那才有用.

I fixed it by using STRETCH instead for smaller media queries. I don't like it but that's what worked.

这篇关于具有透明图像的CSS边框图像在Android上显示出边缘的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！