html css mix-blend-mode

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了html css mix-blend-mode相关的知识，希望对你有一定的参考价值。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>mix blend mode</title>
    <script src="https://d3js.org/d3.v4.min.js"></script>
    <script>
    const blends = [ 'normal','multiply','screen','overlay','darken','lighten','color-dodge','color-burn','hard-light','soft-light','difference','exclusion','hue','saturation','color','luminosity'];
    const backgrounds = [
        {
            name:'None',
            url:''
        },
        {
            name:'Space',
            url:'https://www.jpl.nasa.gov/spaceimages/images/largesize/PIA15226_hires.jpg'
        },
        {
            name:'Maps',
            url:'http://philogb.github.io/assets/france/bertin.jpg'
        },
        {
            name:'Windows-95',
            url:'https://i.imgur.com/UwuqHf6.jpg'
        }
    ];

    </script>
    <style>
        button{
            margin: 2px;
            padding: 5px;
            text-align: center;
            text-transform: uppercase;
            transition: 0.5s;
            background-size: 200% auto;
            border-radius: 0px;
            font-weight: bold;
        }
        body{
            font-family: sans-serif;
        }
        .demo-background{
            position: absolute;
            width: 100%;
            height: 100%;
            background-size: 100vw;
        }

        .demo-overlay{
            position: absolute;
        }

        .image-links,  .image-links a{
            font-size: 10px;
            color: #aaa;
        }
        .selected-button{
            color: white;
            background-image: linear-gradient(to right, #f00 0%, #00f 50%);
        }
    </style>
</head>
<body>
<div class="ui blends">
    <pre>mix-blend-mode:</pre>
</div>
<div class="ui background">
    <pre>background-image:</pre> 
</div><span class="image-links">(<a href="https://www.jpl.nasa.gov/spaceimages/details.php?id=PIA15226">Nasa</a>, 
    <a href="https://visionscarto.net/la-semiologie-graphique-a-50-ans">Bertin</a>,
    <a href="https://thenextweb.com/shareables/2011/08/28/ever-wonder-where-the-windows-xp-default-wallpaper-came-from/">Microsoft</a>)</span>
<div class="demo-area">
    <div class="demo-background"></div>
    <svg class="demo-overlay" width="100%" height="100%" viewBox="0 0 375 667" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:1.41421;">
        <g>
            <circle id="yellow" class="blendable" cx="132.779" cy="146.375" r="72.787" style="fill:yellow;"/>
            <circle id="magenta" class="blendable" cx="239.607" cy="146.375" r="72.787" style="fill:magenta;"/>
            <circle id="cyan" class="blendable" cx="186.193" cy="235.997" r="72.787" style="fill:cyan;"/>
        </g>
        <g>
            <circle id="blue" class="blendable" cx="239.607" cy="488.07" r="72.787" style="fill:blue;"/>
            <circle id="green" class="blendable" cx="132.779" cy="488.07" r="72.787" style="fill:rgb(0, 255, 0);"/>
            <circle id="red" class="blendable" cx="186.193" cy="398.448" r="72.787" style="fill:red;"/>
        </g>
    </svg>
</div>

</body>
<script>

d3.select('.ui.blends')
    .selectAll('button')
    .data(blends)
    .enter()
        .append('button')
        .attr('id',d=>d)
        .attr('class','blend-mode-button')
        .text(d=>d)
        .on('click',(d)=>{
            d3.selectAll('.blendable')
                .style('mix-blend-mode', d);

            d3.selectAll('.blend-mode-button')
                .classed('selected-button',false);
            
            d3.select(`.blend-mode-button#${d}`)
                .classed('selected-button',true);
        });

d3.select('.ui.background')
    .selectAll('button')
    .data(backgrounds)
    .enter()
        .append('button')
        .attr('class','background-button')
        .attr('id',d=>d.name)
        .text(d=>d.name)
        .on('click',(d)=>{
            console.log('d',d);
            d3.select('.demo-background')
                .style('background-image',`url(${d.url})`)

            d3.selectAll('.background-button')
                .classed('selected-button',false);
            
            d3.select(`.background-button#${d.name}`)
                .classed('selected-button',true);
        });
</script>
</html>

以上是关于html css mix-blend-mode的主要内容，如果未能解决你的问题，请参考以下文章

css 颜色混合模式 mix-blend-mode

mix-blend-mode: multiply - Firefox 黑色 bug

CSS3制作文字背景图

黑客如何利用CSS mix-blend-mode在firefox和chrome中获取Facebook用户信息

不可思议的混合模式 background-blend-mode

CSS实现文字镂空效果炫酷背景效果