Лучший способ замаскировать изображение в HTML5 - PullRequest
Новая
       21

Лучший способ замаскировать изображение в HTML5

8 голосов
/ 01 декабря 2011

Мне было интересно, как лучше всего маскировать изображения в HTML 5?

На самом деле я хотел бы отображать миниатюры кругов в галерее, не мешая моему клиенту подготовить круговые картинки ...

Так что у меня есть, на мой взгляд, два варианта: Маскировка на холсте или по старинке

У вас есть другие идеи? Лучшие практики?

Спасибо

Ответы [ 4 ]

13 голосов
/ 01 декабря 2011

вы можете использовать

  • по старинке - с помощью прозрачного png поверх нужного элемента
  • css3 border-radius изображения, установленного на половину его размеров (так что граница определяет круг)
  • свойства css3 mask и mask-clip (вот хорошая демонстрация: http://www.webkit.org/blog/181/css-masks/)
  • холст для маскировки
  • SVG круги с изображением в качестве фона-рисунка

Выбор зависит от целевых браузеров и времени, которое вы хотите инвестировать.
Для получения полного кросс-браузерного результата я рекомендую по старинке , но если вам нужно больше фигур (возможно, динамических) или больше, чем просто маскирование изображений, вы можете попробовать svg или canvas.

3 голосов
/ 01 декабря 2011 
  -circle {
        -webkit-border-radius: 61px;
        -moz-border-radius: 61px;
        border-radius: 61px;
        border:1px solid #aaaaaa;
        width:122px;
        height:122px;
   }

см.

отметьте http://jsfiddle.net/WQSLa/1/

РЕДАКТИРОВАТЬ

вы также можете попробовать http://jsfiddle.net/jalbertbowdenii/WQSLa/3 какпредложено Альбертом

0 голосов
/ 27 февраля 2019

Чтобы обновить ответ, попробуйте clip-path (см. этот пост css-tricks ).

caniuse теперь показывает поддержку более 80%, если вы используетепрефикс -webkit- также.Так что это работает для меня (хотя IE / Edge может быть ограничивающим фактором): 

clip-path: circle(125px at center);
-webkit-clip-path: circle(125px at center);
0 голосов
/ 30 июня 2014

Вот метод, который лучше всего подходит для меня:

  1. создайте SVG нужной вам формы маски.
  2. отредактируйте css соответствующего элемента и укажите URL-адресSVG для маски

Для круга в 200 пикселей ваш SVG может выглядеть так: 

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="image-mask" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
 width="200px" height="200px" viewBox="0 0 200 200" enable-background="new 0 0 200 200" xml:space="preserve">
<circle cx="100" cy="100" r="100" stroke="black" stroke-width="0" fill="black" />
</svg>

А ваш CSS может выглядеть так: 

#image-mask {
    width: 200px;
    height: 200px;
    mask: url('/static/images/avatarmask.svg');
    -webkit-mask-image: url('/static/images/avatarmask.svg');
}

И если вы хотите что-то более глубокое, я нашел это руководство очень полезным: http://collidercreative.com/how-to-create-css-image-masks-for-the-web-with-svgs/.

...