이미지 불투명도/타이트하고 뒤죽박죽 투명한 이미지

가능합니까? 이 그림과 같이 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 div 및 선형 그래디언트를 사용하는 것이 좋습니다 (예 : http://stackoverflow.com/questions/22666063/how-to-fade-the-edge-of-a-div- with-just-css – Pete

이 코드의 키는 혼합 - 혼합 모드입니다 : 곱하기;

<!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

이미지 불투명도/타이트하고 뒤죽박죽 투명한 이미지

답변

관련 문제