Как заштриховать картинку?

Question

[Your Friend]

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

Answer 1

[Adamos]

Если в img лежит png, в котором "море" белое, а Европа - прозрачная, то свойством background этого img можно творить любые динамические чудеса.

Comments

[Your Friend]

при установке background на img, он накладывается и на "море", а нужно заштриховать только континент, или я не правильно понимаю?

[Adamos]

Your Friend: ну, заверните img в span и меняйте background у него.

[Your Friend]

получается вот такая вещь prntscr.com/b52dv0 Может я что то делаю не так?

[Adamos]

Your Friend: можетбыть. Однако сказать, что именно, по картинке я не могу. Направление для размышлений я вам задал, уж разберитесь с остальным сами.

[Your Friend]

ок, спасибо

[Максим Тимофеев]

Your Friend: не надо в span. Div в котором картинка полосатый, картинка белая с прозрачностью на континентах.

[a16a]

Не легче через PS наложить штрих?:)

[Adamos]

a16a: делая, как легче - никогда ничему новому не научишься.
Всякая мелкая фигня - отличное место для непринужденного знакомства с новыми технологиями. Потом, распробовав, их уже можно будет уверенно применять на чем-нибудь серьезном.
В данной задаче, например, можно было попробовать SVG...

Answer 2

[Ксения Михайлова]

С помощью svg можно так (только исходная картинка должна быть с прозрачными областями) https://codepen.io/aarizona/pen/zqQEMo?