Question

有可能吗？有没有办法在CSS / jQuery中为图像添加透明度，就像这张图片一样，所以我的意思是如果我放置标签背景图片，我需要它从左到右透明，反之亦然。 *背景是透明的

我想创建类似于下图的内容：

// HTML
<div id="main"></div> 

//CSS
#main {
    background-image: url('IMAGE.png'), url('PAGINATION.png');

    background-position: left, right;

    background-repeat: no-repeat;
}

有人知道怎么做吗？希望你能理解这个问题。提前谢谢。

Answer 1

此代码的关键是mix-blend-mode：multiply;

 <!DOCTYPE html>
        <head>
            <title>MezclarColores</title>
            <meta charset="UTF-8" />
        </head>
        <style type="text/css">
            .circle {
                mix-blend-mode: multiply;
                display: block;
                border-radius: 50%;
                height: 150px;
                width: 150px;
                margin: 0;
            }
            #left {
                position: absolute;
                top: 20px;
                background: #58FAF4;
            }
            #right {
                position: absolute;
                top: 20px;
                left: 100px;
                background: #D358F7;
            }
            #bottom {
                position: absolute;
                top: 80px;
                left: 50px;
                background: #ff3;
            }
        </style>
        <body>
            <div class="circle" id="left"></div>
            <div class="circle" id="right"></div>
            <div class="circle" id="bottom"></div>
        </body>
    </html>

图像不透明度/透明左侧为紧，反之亦然

1 个答案: