CSS3 混合合成模式和背景合成模式测试

CSS mix-blend-mode and background-blend-mode

CSS3, blend

《three.js如何实现贴图模糊效果 - 使用canvas》申请公开！

第三方库
作品简介 1847
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

html,
body {
    height: 100%
}
body {
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    background: -webkit-linear-gradient(#F00, #00F);
    background: linear-gradient(#F00, #00F);
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    margin: 0
}
.box {
    background: -webkit-linear-gradient(135deg, #F0F, #FF0) #F0F;
    background: linear-gradient(-45deg, #F0F, #FF0) #F0F;
    background-blend-mode: difference;
    height: 300px;
    mix-blend-mode: screen;
    position: relative;
    width: 300px;
}
.dot {
    border-radius: 100%;
    -webkit-filter: opacity(0.5);
    filter: opacity(0.5);
    height: 100px;
    left: 50%;
    mix-blend-mode: overlay;
    position: absolute;
    top: 50%;
    width: 100px;
}
.dot:first-child {
    background-image: -webkit-linear-gradient(#F0F, #0FF);
    background-image: linear-gradient(#F0F, #0FF);
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}
.dot:nth-child(2) {
    background-image: -webkit-linear-gradient(135deg, #00F, #F00);
    background-image: linear-gradient(-45deg, #00F, #F00);
    -webkit-transform: translate(-50%, -50%) translate(-25%, 37.5%);
    transform: translate(-50%, -50%) translate(-25%, 37.5%);
}
.dot:last-child {
    background-image: -webkit-linear-gradient(45deg, #0F0, #00F);
    background-image: linear-gradient(45deg, #0F0, #00F);
    -webkit-transform: translate(-50%, -50%) translate(25%, 37.5%);
    transform: translate(-50%, -50%) translate(25%, 37.5%);
}

HTML

CSS mix-blend-mode and background-blend-mode

CSS3, blend

编辑器支持Emmet

快捷键

CSS mix-blend-mode and background-blend-mode

CSS3, blend

使用CSS3滤镜/合成模式和伪元素实现仿Spotify网站风格的图像双色特效

CSS3 用blend-mode属性来制作图像文本混合模式效果

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：