具有透明圖像的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上顯示邊緣

回答

相關問題