Question

我遇到的问题是我的div的顶部，左侧和右侧点上的图像被切断了。当我没有设置background-repeat: no-repeat;时，图像只会在那三个点上重复，这会让人感到尴尬。

----^----
<------->
----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

Answer 1

使用background-position: -10px center来计算10px边框，然后设置background-size: 110%;，使其水平展开以覆盖边框。然后设置background-repeat: no-repeat

<强> DEMO

Answer 2

我认为您需要调整图片width和height

http://jsfiddle.net/ygFKD/3/

背景图像在CSS圆圈的顶部，左侧和右侧点上切断

2 个答案: