mix-blend-mode及background-blend-mode实现炫酷的图片样式

gougoujiang 发布于2019-08-30 15:54 / 2174人阅读

摘要：在网上看到了有如相机功能的实现比较好看的图片样式，自己也想弄下，在这里记录下效果图相关属性正常正片叠底滤色叠加变暗变亮颜色减淡颜色加深强光柔光差值排除色相饱和度颜色

在网上看到了有如相机功能的mix-blend-mode实现比较好看的图片样式，自己也想弄下，在这里记录下

1.效果图

2.mix-blend-mode相关属性

{
    mix-blend-mode: normal;         // 正常
    mix-blend-mode: multiply;       // 正片叠底
    mix-blend-mode: screen;         // 滤色
    mix-blend-mode: overlay;        // 叠加
    mix-blend-mode: darken;         // 变暗
    mix-blend-mode: lighten;        // 变亮
    mix-blend-mode: color-dodge;    // 颜色减淡
    mix-blend-mode: color-burn;     // 颜色加深
    mix-blend-mode: hard-light;     // 强光
    mix-blend-mode: soft-light;     // 柔光
    mix-blend-mode: difference;     // 差值
    mix-blend-mode: exclusion;      // 排除
    mix-blend-mode: hue;            // 色相
    mix-blend-mode: saturation;     // 饱和度
    mix-blend-mode: color;          // 颜色
    mix-blend-mode: luminosity;     // 亮度

    mix-blend-mode: initial;
    mix-blend-mode: inherit;
    mix-blend-mode: unset;
}

3.在css上加mix-blend-mode

html文件

css样式

.container{
    position: relative;
    margin: 140px auto;
    width: 120px;
    height: 120px;
}
.item{
    position: absolute;
    top: 0;
    left: 0;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    mix-blend-mode: normal;
}
.mode1{
    transform: translateX(30%);
    background: rgba(255, 0, 255, .8);
}
.mode2{
    transform: translateX(-30%);
    background: rgba(0, 255, 255, .8);
}
.mode3{
    transform: translateY(-50%);
    background: rgba(0, 255, 0, .8);
}
#select{
    position: absolute;
    left: 500px;
    top: 100px;
}

4.使用background-blend-mode

css文件

.root {
    width: 400px;
    height: 500px;
    margin: 20px auto;
    background: url(../images/22.jpg),
        url(https://user-images.githubusercontent.com/8554143/34369175-c14ae23e-eaf4-11e7-96f1-e146e5e5a96b.jpg);
    background-size: cover;
    /*background-blend-mode: lighten;*/
}
#root{
    position: absolute;
    top: 50px;
    left: 50px;
}
ul{
    margin: 0;
    padding: 0;
    list-style: none;
}
/* 下拉框包含层 */
#selectedItem{
    width: 240px;
    cursor: pointer;
}
/* 已选中的选项 */
#promptText{
    position: relative;
    padding-left: 10px;
    width: 230px;
    height: 30px;
    line-height: 30px;
    border: 1px solid #d3d3d3;
    border-radius: 4px;
    background: #fff;
    color: #999;
    font-size: 14px;
}
/* 图标 */
#arrows{
    position: absolute;
    top: 0;
    right: 0;
    width: 30px;
    height: 30px;
    vertical-align: middle;
}
#arrows:focus{
    outline: none;
}
/* 下拉可选项包含层 */
.choiceDescription{
    position: absolute;
    display: none;
    /*overflow: hidden;*/
    margin-top: 2px;
    width: 240px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-shadow: 0 1px 6px rgba(0, 0, 0, .1);
    background: #fff;
}
.show{
    display: block;
}
/* 下拉可选项 */
.item{
    height: 30px;
    line-height: 30px;
    padding-left: 10px;
    font-size: 15px;
    color: #666;
}
.item:hover, .active{
    color: #fff;
    background: rgba(49, 255, 195, 0.67);
}

html文件



    
        请选择你喜欢的文字
        
            normal--正常
            multiply--正片叠底
            screen--滤色
            overlay--叠加
            darken--变暗
            lighten--变亮
            color-dodge--颜色减淡
            color-burn--颜色加深
            hard-light--强光
            soft-light--柔光
            difference--差值
            exclusion--排除
            hue--色相
            saturation--饱和度
            color--颜色
            luminosity--亮度

5.注意项

mix-blend-mode及background-blend-mode存在兼容性

正在努力学习中，若对你的学习有帮助，留下你的印记呗（点个赞咯^_^）

往期好文推荐：

判断iOS和Android及PC端

纯css实现瀑布流（multi-column多列及flex布局）

实现单行及多行文字超出后加省略号

微信小程序之购物车和父子组件传值及calc的注意事项

云服务器 GPU云服务器图片样式 webrtc现状及实现概要 html列表样式图片公开样式或图片的接口

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/117117.html

mix-blend-mode及background-blend-mode实现炫酷的图片样式

摘要：在网上看到了有如相机功能的实现比较好看的图片样式，自己也想弄下，在这里记录下效果图相关属性正常正片叠底滤色叠加变暗变亮颜色减淡颜色加深强光柔光差值排除色相饱和度颜色在网上看到了有如相机功能的mix-blend-mode实现比较好看的图片样式，自己也想弄下，在这里记录下 1.效果图 showImg(https://segmentfault.com/img/bVblsM0?w=726&...

jackwang 2019-08-23 14:13 评论0 收藏0
CSS3学习小结

摘要：看到人家实现的实在是太棒了，就想到该学学了。属性用来查询浏览器是否支持新特性。还有语句，不支持的时候执行。还支持多个条件块，，，。浏览器支持情况只有，，的支持情况比较好。这几日在http://lab.iamvdo.me/houdini/看到了很炫酷的CSS实现。看到人家实现的实在是太棒了，就想到该学学CSS了。 @support属性 @support:用来查询浏览器是否支持css新特...

WrBug 2019-08-29 13:47 评论0 收藏0
[盘点]项目中可以怎么优化图片

摘要：雪碧图雪碧图就是把很多小的图整合到一起，制作成一张比较大的图，然后作为元素的背景图片使用，定位到相应的图片即可。除此之外，使用雪碧图，有两个个注意地方不要把页面所有的图片都合并，比如把整合会破坏的语义结构。看似平常的事物，往往会蕴含的巨大的智慧。把看似平常的事物简单做好，可能很正常。如果能把平常的事物做精，做细，这个不平常。 1.前言每一个开发者在开发项目中，不可避免要和图片打交道...

lykops 2019-08-23 13:41 评论0 收藏0
[盘点]项目中可以怎么优化图片

摘要：雪碧图雪碧图就是把很多小的图整合到一起，制作成一张比较大的图，然后作为元素的背景图片使用，定位到相应的图片即可。除此之外，使用雪碧图，有两个个注意地方不要把页面所有的图片都合并，比如把整合会破坏的语义结构。看似平常的事物，往往会蕴含的巨大的智慧。把看似平常的事物简单做好，可能很正常。如果能把平常的事物做精，做细，这个不平常。 1.前言每一个开发者在开发项目中，不可避免要和图片打交道...

hedzr 2019-08-02 12:07 评论0 收藏0
更丰富的网页多图层效果：css混合模式

摘要：与绘制顺序密切相关的概念是层叠上下文。把正常也算上的话，现在网页里可用的混合模式一共种。因此，正片叠底是一个变暗的混合模式。需要注意的是，其中这个位于最下层的背景该元素无背景色，它的混合模式其实是没有作用的，可以认为就是默认值。图层在Photoshop等图像编辑软件里，图层是最基础的概念之一。我们平时看一张照片，就可能想到远处的背景、近处的人物这样的描述，这其实就是在划分图层。多个...

Ku_Andrew 2019-08-30 12:44 评论0 收藏0