Css 模仿Photoshop的混合效果，如倍增、叠加等

我正在制作一个带有整页背景图片的网站。我想为侧栏创建一个背景图像，该侧栏的作用类似于具有“倍增为混合”模式的Photoshop层。它只是一个蓝色的表面，具有Photoshop乘法层的“行为”

无法合并覆盖和图像，因为当网站以另一屏幕比例/大小打开时，背景可能会发生变化

有很多这样的解决方案，但它们只适用于固定位置的两个图像相乘，而不适用于可变位置/背景的彩色曲面

---

有什么技巧可以实现这一点吗？

正如FC所说，您可以使用CSS3自定义过滤器或SVG/Canvas

但如果你需要一个跨浏览器的混合层解决方案，你必须使用JS方法。例如，Pixastic的JS图像处理脚本：

此外，它还有很多其他视觉效果，如模糊、噪音、裁剪、马赛克等

我以前在几个项目中使用过这个脚本，它的效果非常好：）

---

希望它能帮助您）

简单地使用一点SVG：

<svg width="200" height="200" viewBox="10 10 280 280">
    <filter id="multiply">
        <feBlend mode="multiply"/>
    </filter>
    <image id="kitten" x="0" y="0" width="300" height="300" xlink:href="http://placekitten.com/300" />
</svg>

---

小提琴：

我是一名设计师，也有同样的问题，在将psd交给开发团队之前寻找解决方案-您可以尝试和/或

JSIDLE代码：

#kitten:hover {
    filter:url(#multiply);
}

<svg width="200" height="200" viewBox="10 10 280 280">
    <filter id="multiply">
        <feBlend mode="multiply"/>
    </filter>
    <image id="kitten" x="0" y="0" width="300" height="300" xlink:href="http://placekitten.com/300" />
</svg>

#小猫：悬停{
过滤器：url（#乘法）；
}

希望它对您或这里的其他人有用。：）

使用CSS3属性混合模式 （对于回退，使用带有一点alpha透明度的

rgba

或

hsla

颜色。）

为元素指定所需的混合-*类，如：

/*：：混合模式类*/
.blend normal{mix blend mode:normal；}
.blend multiply{mix-blend mode:multiply；}
.blend屏幕{混合混合模式：屏幕；}
.blend叠加{混合混合模式：叠加；}
.blend变暗{混合混合模式：变暗；}
.blend-lighte{mix-blend-mode:lighte；}
.blend colordodge{混合混合模式：颜色减淡；}
.blend-colorburn{mix-blend-mode:color-burn；}
.blend硬光源{混合混合模式：硬光源；}
.blend柔和灯光{混合混合模式：柔和灯光；}
.blend差异{混合混合模式：差异；}
.blend排除{混合混合模式：排除；}
.blend色调{混合混合模式：色调；}
.blend饱和度{混合混合模式：饱和度；}
.blend color{mix blend mode:color；}
.blend亮度{混合混合模式：亮度；}
/*：：在这里设置您的初始颜色*/
div{
背景：rgba（0,80,200,0.8）；
颜色：#fff；
}
分区跨度{
颜色：#000；
}
/*：：仅用于演示*/
html，正文{空白：0；高度：100%；字体：100%/1无衬线；}
正文{背景：url(http://i.stack.imgur.com/cBy6q.jpg)固定50%/覆盖；}
div{font size:2.2em；padding:20px；margin:15px；}
div:type{margin top:150px；}的第一个
div:type{margin bottom:150px；}的最后一个

（rgba）（rgba）
正常正常
乘
屏风
覆盖层
变暗
减轻
颜色减淡颜色减淡
颜色烧伤颜色烧伤
强光强光
柔和的光线柔和的光线
差异
排除
色调
饱和
颜色
亮度亮度

为什么不使用css

rgba（0,65,131,8）

来设置侧栏的背景色？这只会创建一个透明的蓝色背景，但我希望具有Photoshop中的倍增效果。（2层：1.图像，2.纯蓝色，混合模式“倍增”）啊，我明白了。有趣的问题：）+1使用html5画布是您的选择，还是您需要与旧浏览器向后兼容？请尝试使用此帖子进行混合，并使用中的公式获得混合公式。这与tnt的条目有何不同？

#kitten:hover {
    filter:url(#multiply);
}

<svg width="200" height="200" viewBox="10 10 280 280">
    <filter id="multiply">
        <feBlend mode="multiply"/>
    </filter>
    <image id="kitten" x="0" y="0" width="300" height="300" xlink:href="http://placekitten.com/300" />
</svg>