CSS3中的mix-blend-mode和background-blend-mode

最新推荐文章于 2024-09-06 22:49:24 发布

justforuse

最新推荐文章于 2024-09-06 22:49:24 发布

阅读量2.5k

点赞数

分类专栏： html/css 文章标签： css3 背景混合

本文链接：https://blog.csdn.net/u014291497/article/details/77620973

版权

本文介绍了CSS3中的mix-blend-mode和background-blend-mode属性，这两个属性允许元素和背景图片实现类似Photoshop的混合效果。通过调整不同混杂模式，可以创造出文字颜色随背景色变化的效果，以及背景图片的混合样式。在Chrome和Firefox中可能需要注意一些兼容性问题。

摘要由CSDN通过智能技术生成

起初想找一个算法来寻找颜色对应的对比色，以在不确定文字颜色的情况下设置其背景色，这样不至于出现颜色重合或者差别不大的情况。
然后找到了这篇文章，其中介绍了mix-blend-mode这个属性，很神奇的属性，效果：
这里写图片描述
文字会随背景色的改变进行相应改变。

mix-blend-mode

mix-blend-mode支持多个属性值，类似PS中的图片混杂模式。参考：MDN
示例：

<style>
    html,
    body {
        height: 100%;
        margin: 0;
        width: 100%;
    }

    .wrapper {
        background: url(../beach.jpg) center center no-repeat;
        b