CSS mix-blend-mode chrome issue

Question

Мне нужно сделать эффект, похожий на Photoshop. Мой код отлично работает в Firefox, но он не работает в Chrome. Там в fiddle

Там мой код:

HTML

<img src="http://lorempixel.com/output/fashion-h-c-614-631-5.jpg"/> <div id="blend"></div>

CSS:

img{ max-width:100%; height:auto; }

#blend{ position:absolute; top:0; width:100%; height:100px; z-index:100; background-color:#fff; mix-blend-mode:overlay; }

Answer 1

Срок службы Chrome 40.x не включен с включенной функцией mix-blend-mode.

Вы можете включить его вручную в Chrome или Opera:

1. Скопируйте и вставьте хром: // флаги/# включить-экспериментальные-веб-платформенные возможности минуты адресной строки, а затем нажмите Ввод.

2. Нажмите ссылку «Включить» в этом разделе.

3. Нажмите кнопку «Повторить сейчас» в нижней части окна браузера.

Сказав, что вы должны знать, что режим mix-blend будет работать только на клиентах с включенными функциями экспирации. :(

Я сам был очень разочарован, чтобы это выяснить.

Функция background-blend-mode: overlay; доступна без него.

Это будет смесь background-image против background-color. Нет, вы не можете обмануть, делая цвет прозрачной.

будет надеяться, что мы увидим mix-blend-mode корабля с хромом по умолчанию в ближайшее время.