如何在css3中創建可以移動/調整背景圖像大小的簡單圓圈？

Question

我試着用

.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 ???? */ 
 
    }

<img class="mask">

這幾乎是很好的：我可以移動與backgound位知情同意，但我不能調整的背景圖片。

我試着用CSS3口罩，但這僅適用於鉻

-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

你的小提琴：使用 '背景size' 屬性http://jsfiddle.net/nnr64y3b/2/