Доступны ли маски CSS

Question

Возможно ли иметь маску в CSS

Мне было интересно, могу ли я использовать маску, чтобы сделать что-то вроде этого.

http://www.ttmt.org.uk/face.png

Было бы хорошо, если бы я мог сделать это что-то вроде этого.

<div class="circle"> 
     <img src="face.jpg" alt="" /> 
    </div> 

Если я не могу сделать это, как это, является единственным способом сделать это в Photoshop, а затем иметь плоское квадратное изображение с лицом в круге внутри.

Answer 1

Вам просто нужно работать с имуществом border-radius и overflow:hidden на контейнере. Как это:

.circle { 
    width:300px; 
    height:300px; 
    border-radius:50%; 
    overflow:hidden; 
} 

Проверить это D'о Demo http://jsfiddle.net/p57fs/

Answer 2

Вы можете использовать CSS border-radius свойство либо на само изображение, если оно уже обрезаны, или на контейнере DIV на «маску» образ ,

вариант 1

Использование border-radius на само изображение. See this demo. Это проще реализовать с помощью одного тега HTML, но вы на самом деле не маскируете изображение таким образом (чтобы ваши изображения были правильно обрезаны).

Вариант 2

Использование border-radius на контейнере DIV. Это дает вам больше контроля над расположением изображения. see this demo.

Обратите внимание, что в старых браузерах свойство border-radius не поддерживается (see here). Если он не поддерживается, появится квадратное изображение, поэтому я думаю, что сайт все равно останется функциональным