zoukankan      html  css  js  c++  java
  • css3:mix-blend-mode 混合模式

    mix-blend-mode与isolation

    isolation配合mix-blend-mode

    可以制作混合图层,就像ps里一样。

    资料:css混合模式  css混合模式兼容

    代码:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <style>
        body,html{
            margin: 0;
            width: 100%;
            height: 100%;
        }
        .container{
            width: 100%;
            height: 250px;
            position: relative;
        }
        .container .bg{
            background: pink;
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            left: 0;
        }
        .container img{
            mix-blend-mode: multiply;
        }
    
        .container2{
            width: 100%;
            height: 250px;
            position: relative;
            overflow: hidden;
        }
        .container2:hover .content{
            transform: translate3d(50%,0,0);
        }
        .container2 .bg{
            background: url(1.jpg) no-repeat center center;
            background-size:cover; 
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            left: 0;
        }
        .container2 .content{
            mix-blend-mode: lighten;
            position: absolute;
            top: 0;
            left: 0;
            background: #fff;
            color: #000;
            line-height: 250px;
            width: 100%;
            height: 250px;
            font-size: 100px;
            transition: all .5s;
        }
        </style>
    </head>
    <body>
    <!-- 
        本质上, 在图片上使用 mix-blend-mode: multiply; 样式, 会把所有白色的部分转换成半透明的 png。
     -->
        <div class="container">
            <div class="bg"></div>
            <img src="usher.jpg" alt="">
        </div>
        <!-- 
        mix-blend-mode: lighten;
        高亮特效,黑色颜色会被透明
         -->
        <div class="container2">
            <div class="bg"></div>
            <div class="content">IMAGE</div>
        </div>
    </body>
    </html>
  • 相关阅读:
    瀑布流布局(等宽不等高jQuery)
    多组图自动无限循环(swiper轮播)
    $.ajax的标准写法
    走马灯特效
    如何使用js改变HTML中title里面固定的文字
    test
    单例设计模式
    线程的五种状态(线程的生命周期)
    Net基础班第十三天
    装箱、拆箱
  • 原文地址:https://www.cnblogs.com/zhangzhicheng/p/8146403.html
Copyright © 2011-2022 走看看