Question

我试过

＆＃13;

    .mask {
        width: 200px;
        height: 200px;
        border-radius: 50%;
        -webkit-border-radius: 50%;
        -moz-border-radius: 50%;
        background: url(http://lapeniche.net/wp-content/uploads/2013/12/Chat.jpg) no-repeat;
       background-position: -50px -50px; /* this allows to move the image inside */
      /* but how to resize the CAT picture ???? */
    }

＆＃13;

<img class="mask">

＆＃13;

这几乎是好的：我可以用背景位置移动图片，但我无法调整背景图片的大小。

我试过使用css3蒙版，但这只适用于chrome

  -webkit-clip-path: circle(100px at 150px 150px);
    -moz-clip-path: circle(50%, 50%, 30%);
    clip-path: circle(50%, 50%, 30%);

有任何线索吗？

小提琴是：http://jsfiddle.net/nnr64y3b/

目标是创建一个圆形圆，我可以移动内部图像的位置 和内部图像的尺寸

Answer 1

您可以使用：

background-size: x% x%;

https://developer.mozilla.org/en-US/docs/Web/CSS/background-size

你的小提琴：http://jsfiddle.net/nnr64y3b/2/

如何在css3中创建简单的圆圈，我可以移动/调整背景图像的大小？

1 个答案: