柔光混合模式不起作用

Question

我正在尝试针对线性渐变应用图像的柔光混合模式，但效果未加载到 chrome。我的代码是：

background-size: contain;
background-repeat: no-repeat;
background-position: center center;
background-image: url('../img/mall.png'), -moz-linear-gradient(90deg, #f857a6 0%, #ff5858 100%);
background-image: url('../img/mall.png'), -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ff5858), color-stop(100%, #f857a6));
background-image: url('../img/mall.png'), -webkit-linear-gradient(90deg, #f857a6 0%, #ff5858 100%);
background-image: url('../img/mall.png'), -o-linear-gradient(90deg, #f857a6 0%, #ff5858 100%);
background-image: url('../img/mall.png'), -ms-linear-gradient(90deg, #f857a6 0%, #ff5858 100%);
background-image: url('../img/mall.png'), linear-gradient(0deg, #f857a6 0%, #ff5858 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff5858', endColorstr='#f857a6',GradientType=0 );
background-blend-mode: soft-light;

Answer 1

它对我来说工作正常:

div {
  width: 600px;
  height: 400px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center center;
  background-image: url('http://placekitten.com/1000/800'), linear-gradient(0deg, #f857a6 0%, #ff5858 100%);
  background-blend-mode: soft-light;
}

<div></div>

柔光混合模式不起作用

Soft light blend mode not working

css

gradient

blend

linear-gradients