2

div の上、左、右のポイントで画像が切り取られるという問題があります。設定しないとbackground-repeat: no-repeat;、画像が 3 点だけで繰り返されるので、ぎこちなく感じます。

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

「X」は、これによって影響を受けないポイントです。

設定background-repeat: no-repeat;すると、それらのポイントが完全に切り取られ、円ではなくボックスのような形になります。

トップは3つの中で最も目立つポイントです

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を考慮し、水平方向に拡張して境界線で覆われるようにします。次に設定10pxbackground-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 に答える