Альтернатива CSS Blend Mode в IE?

Я использую фоновую Blend-режим на этом:Альтернатива CSS Blend Mode в IE?

<a href="#" class="blend"> 
    <h3>Title</h3> 
    <p>Content goes here</p> 
</a>

Он имеет URL, установленное для фона изображения. Когда .blend завис над, он меняет фон на это:

.blend:hover { 
    background-blend-mode:multiply; 
    background-color: rgba(0,0,0,.6); 
}

Так это работает, но не в IE (конечно). Какие существуют альтернативы? Есть ли какой-то трюк jQuery, который я могу использовать, чтобы заставить его работать в IE? Или есть префикс, который я мог бы использовать, скажем -ms- или что-то подобное?

источник

2015-05-26 FranticJ3

Вы можете [ ' -MS-filter'] (https://msdn.microsoft.com/en-us/library/ms530752 (v = vs.85) .aspx). См. Также [этот вопрос] (http://stackoverflow.com/questions/25158696/blend-modemultiply-in-internet-explorer). – Blazemonger

Фильтр будет применяться ко всему элементу, а не только к фону. – Shaggy

@Blazemonger: Этот вопрос был первым, что я нашел, но он только, казалось, обращался к изображению (из того, что я мог понять, по крайней мере). Сама функция продолжала возвращать ошибки, когда я ее вызывал. – FranticJ3

Не лучшее решение, которое я знаю, но поскольку IE и MS Edge не могут использовать background-blend-mode (http://caniuse.com/#feat=css-backgroundblendmode).

Я обойду это, добавив к элементу класс :after и манипулируя его с помощью background-colour и играя с opacity на псевдоэлементе.

DEMO

https://codepen.io/nicekiwi/pen/PmZdMK

HTML

<div class="blend"></div>

CSS

.blend { 
    background-image: url('http://placekitten.com.s3.amazonaws.com/homepage-samples/408/287.jpg'); 
    background-repeat: no-repeat; 
    background-attachment: cover; 
    width: 200px; 
    height: 200px; 
    position: relative; 
} 

.blend:after { 
    width: 100%; 
    height: 100%; 
    content: ''; 
    background-color: red; 
    position: absolute; 
    top: 0; 
    left: 0; 
    opacity: 0; 
    transition: opacity 0.3s; /* lets transition to be fancy ^_^ */ 
} 

.blend:hover:after { 
    opacity: 0.3; 
}

источник

2017-04-19 23:17:52 Nicekiwi

Альтернатива CSS Blend Mode в IE?

ответ

Смежные вопросы