CSSプロパティmix-blend-modeを使用せずにブレンドモードエフェクトを取得する方法：乗算

Question

このコード出力のようになりますが、サポートを得るためにCSSのmix-blend-mode: multiplyプロパティを使用しないでくださいいくつかの古いバージョンのモダンブラウザです。

CSSのこの機能はまだ低いサポートされ、このリンクを見てcaniuse.com[mix-blend-mode]

.active{ 
 
    font-size: 80px; 
 
    font-family: "DejaVu Sans"; 
 
    text-align: center; 
 
    color: #646e7a; 
 
} 
 
.active::after { 
 
    background: #00d7a7 none repeat scroll 0 0; 
 
    content: ""; 
 
    height: 45px; 
 
    left: 10%; 
 
    margin-top: 0; 
 
    mix-blend-mode: multiply; 
 
    position: absolute; 
 
    right: 10%; 
 
    top: 13.8%; 
 
}

<div class="active"> 
 
    WEB 
 
</div>

Answer 1

これは私が見つけた素敵なソリューションです：

.active{ 
 
    background: #00d7a7 none repeat scroll 0 0; 
 
    color: rgba(30, 40, 52, 0.73); 
 
    font-family: "DejaVu Sans"; 
 
    font-size: 80px; 
 
    height: 45px; 
 
    line-height: 0.6; 
 
    position: relative; 
 
    text-align: center; 
 
    top: 20px; 
 
}

<div class="active"> 
 
    WEB 
 
</div>