上圖是在工作時候遇見的一個效果，ps里面的效果就是上面的，咋一看以為就是紅色背景透明度，然后馬上就搞最后發現效果完全不一樣的。這個圖是ps的正片疊底效果的。百度搜資料的時候，關鍵是 css3正片疊底會有好多資料，我這里就根據我自己的了解簡單說一下這個正片疊底效果。
這個東西叫做css3 混合模式，背景混合啊 圖片和圖片混的的。具體的我也沒有搞清楚，我只是知道了這個正片疊底（圖片與圖片混合）模式
<body>
<div class="multiply">
<p>multiply正片疊底效果</p>
<img src="testimg/redbg.jpg" alt="" />
</div>
</body>
這是html結構。div是有背景圖片，就是上面圖里面的老奶奶，img標簽是紅色的圖片，純紅色不透明。
css如下：
div {width:640px;height:1008px;margin: 0 auto;
background: url('testimg/hel_bg.jpg') center;
/*這里是背景圖片*/
background-size: cover;
}
.multiply img { /*這個圖片需要正片疊底的純顏色圖片，不透明，這里是紅色*/
mix-blend-mode: multiply;
}
background-size: cover;
}
.multiply img { /*這個圖片需要正片疊底的純顏色圖片，不透明，這里是紅色*/
mix-blend-mode: multiply;
}
這樣效果就是ps的正片疊低了，關鍵的屬性就是img標簽的
mix-blend-mode: multiply;、
上面的效果是在一個背景圖片上面浮動了另一個圖片，兩個圖片重合部分正片疊底了，下面的是另一種情況
/*-------情況二----------------*/
<div class="multiply">
<p>multiply</p>
<!--<img src="testimg/redbg.jpg" alt="" />-->
</div>
html結構，我注釋掉了img標簽，這個div里面沒有圖片標簽了
css；
div {width:640px;height:1008px;margin: 0 auto;
background: url('testimg/hel_bg.jpg') center;
background-color: red;
background-size: cover;
background-blend-mode: multiply;
}
這里就是div自己的背景圖片和自己的背景顏色混合了，實現了正片疊低。注意只有一個元素div，這個div有背景圖片和背景顏色。
background-blend-mode: multiply;是div屬性，mix-blend-mode: multiply; 是img的屬性，兩個東西有差別