Как замаскировать изображение с градиентным фоном?

у меня есть изображения, и я хочу удалить 2 угла каждого изображения. Удаленная часть должна быть прозрачной, и это часть, которую я не смог исправить. Вот 2 изображения, которые показывают, что я хочу сделать:

Это пустой образ. Белый цвет — это та часть, которую я хочу показать. Синяя часть показывает цвет градиента фона документа.

основное изображение

Вот что я должен получить в итоге. Синяя часть снова прозрачна от цвета градиента документа.

как это должно выглядеть

У кого-нибудь есть идея?


html css png
person Alaa Badran    schedule 11.09.2012    source источник

Ответы (2)


arrow_upward
0
arrow_downward

В браузерах webkit вы можете использовать mask-box-image. Поместите свое изображение в div с классом маски изображения, а затем используйте mask-box-image с прозрачным png

.image-mask {
  -webkit-mask-box-image: url(your_mask.png);
}

На всегда блестящем веб-сайте CSS Tricks есть отличная статья — http://css-tricks.com/webkit-image-wipes/

Боюсь, это только вебкит.

person SpaceBeers    schedule 11.09.2012
comment
Обратите внимание, что градиент взят из ФОНА ДОКУМЕНТА. поэтому, если положение этого изображения и его маски изменились, градиент не будет зафиксирован. - person Alaa Badran; 11.09.2012
comment
вот статья, которая охватывает больше браузеров с использованием изображения svg stackoverflow.com/questions/8414348/ - person Breezer; 11.09.2012
comment
Есть ли решение для всех браузеров? - person Alaa Badran; 11.09.2012
comment
@AlaaBadran - Не то, чтобы я знал об этом. Извини. - person SpaceBeers; 11.09.2012
comment
@SpaceBeers Дополнительную документацию можно найти здесь developer.mozilla.org/en-US/ документы/CSS/маска - person Breezer; 11.09.2012
comment
@AlaaBadran - Кстати, SVG не поддерживается на устройствах Android. - person SpaceBeers; 11.09.2012
comment
для андроида у меня другая версия работает. Большое спасибо @SpaceBeers - person Alaa Badran; 11.09.2012

arrow_upward
0
arrow_downward

Кому-то может не понравиться мой ответ без кода, но вы могли бы сделать это в самом изображении? Пожалуйста, не ненавидьте меня за это предложение, но иногда код решает не все.

  1. Сохраните изображение в формате PNG.
  2. Убедитесь, что слой, над которым вы работаете, не является «фоновым» слоем, если вы работаете в Photoshop.
  3. Сотрите/используйте инструмент Marquis, чтобы удалить часть изображения, которую вы хотите сделать прозрачной. Вы можете размыть края инструмента Marquis, чтобы он «исчезал».
  4. В зависимости от ваших настроек в Photoshop или другой программе редактирования, «прозрачный» раздел должен быть серо-белым в шахматном порядке.
  5. Сохраните изображение в формате PNG и используйте его вместо закодированной маски.

Конечно, это не работает, если вы динамически загружаете изображения или по какой-то другой причине вы полагаетесь на код для маскировки вашего изображения, но это должно работать. Ранние версии IE имеют некоторые проблемы с PNG, но я не сталкивался с ними в IE9, IE8 или IE7 в своем текущем проекте.

person ACannan    schedule 25.10.2012