html – css div background-image url将颜色改为有色蓝色在IE11中不起作用

我有一个div,我只想让外部图像变成蓝色.此代码在IE Edge和之前的所有浏览器中都运行良好.

有一件事是我需要用css解决这个问题,即我的响应.动态地写出这个html.这是当前的工作代码

.section-2 {
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
background-color: #54b3ea;
background-blend-mode: multiply;
height:375px;

}

//fyi the url is found dynamically
<div class="col-sm-24 col-md-12 section-2" style="background-image: url('https://external.xx.fbcdn.net/safe_image.PHP?d=AQD0jbn3FeE4TUol&url=http%3A%2F%2Fgoodnewsshared.com%2Fwp-content%2Fuploads%2F2016%2F10%2Frsz_shitima_markit_2.jpg');">
</div>

这是工作jsfiddle(除了Internet Explorer边缘或更低)

http://jsfiddle.net/dQy8A/31/

解决方法

您可以将此行添加到您的CSS中,它将使它适合您.你只需要将不透明度从0.3调整到你想要的任何级别.测试和边缘工作.

Box-shadow:inset 0 0 0 2000px rgba(84,179,234,0.3);

这是小提琴

http://jsfiddle.net/dQy8A/35/