2

我的 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

4

2 回答 2

4

用于background-position: -10px center考虑10px边框，并使其background-size: 110%;水平扩展以被边框覆盖。然后设置background-repeat: no-repeat

演示

于 2014-02-25T19:35:45.240 回答
0

我认为你需要调整图像width和height

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

于 2014-02-25T19:32:59.553 回答