图像的不透明度/透明度左至反之亦然

这可能吗？有没有什么办法为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; 
}

是否有人知道如何做到这一点？希望你能理解这个问题。先谢谢你。

来源

2017-04-04 sasa

如果是2个图像，为什么不创建一个图像，你想要做的，而不是试图结合2是什么？如果你需要淡出，那么你可能更好使用2 div和线性渐变，例如http://stackoverflow.com/questions/22666063/how-to-fade-the-edge-of-a-div-与-刚刚CSS – Pete

这段代码的关键是混合混合模式：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>

来源

2017-04-04 15:13:17

图像的不透明度/透明度左至反之亦然

回答

相关问题