背景圖像切斷了CSS圈的頂部，左側和右側點

我遇到了圖像在我的div的頂部，左側和右側點被切斷的問題。當我沒有設置background-repeat: no-repeat;時，圖像只會重複三點，這會讓人覺得很尷尬。背景圖像切斷了CSS圈的頂部，左側和右側點

----^---- 
<-------> 
----X----

'X'是不受此影響的點。

當我設置background-repeat: no-repeat;它完全切斷這些點，並留下像形狀而不是圓形的盒子。

頂部是最引人注目的點出了三

在Chomre，Firefox和Safari測試的。

這裏是CSS：

#picFrame { 
    height: 60%; 
    position: absolute; 
    border-radius: 50%; 
    top: 15%; 
    left: 50%; 
    background-image: url("http://jpowell43.mydevryportfolio.com/me.jpg"); 
    background-size: cover; 
    background-position: top center; 
    /*background-repeat: no-repeat;*/ 
    overflow: hidden; 
    border: 10px solid rgba(255, 255, 255, 0.6); 
}

最後，小提琴：Demo

來源

2014-02-25 Josh Powell

，如果你使圖像10px的高和寬爲20px，會發生什麼？ – SamotnyPocitac

對邊框使用僞元素可能是一種可能的解決方法：[fiddle]（http://jsfiddle.net/ygFKD/2/） – Adrift

這是我目前最大的圖像大小。我可以試試這個，讓你知道。 –