2017-04-04 13 views
0

可能ですか?この画像のように、CSS/jQueryの画像に透明度を追加する方法はありますか?タグの背景画像を置くと、左から右に、そして逆に透明にする必要があります。 *背景は、私は下の画像のようなものを作成したい画像の不透明/透明な左とぴったりと逆の画像

透明である:

enter image description here

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

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

    background-position: left, right; 

    background-repeat: no-repeat; 
} 

誰もがこれを行う方法を知っていますか? あなたはその質問を理解できることを願っています。前もって感謝します。

+0

それは2枚の画像であれば、なぜあなたが代わりに2を結合しようとしているの欲しいものを行い画像を作成していませんか?フェードアウトする必要がある場合は、おそらく2 divと線形グラデーションを使用するほうが良いでしょう(例:http://stackoverflow.com/questions/22666063/how-to-fade-the-edge-of-a-div- with-just-css – Pete

答えて

0

このコードのキーは、mix-blend-modeです。

<!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> 
関連する問題