배경에 블렌드 모드와 그레이 스케일을 결합합니다.

Question

배경 혼합 모드가 새로운 CSS 기능이라는 것을 알고 있습니다 만, CSS의 필터 기술과 결합 될 수있는 방법이 무엇인지 궁금합니다.

기본적으로 달성하고자하는 것은 이미지를 풀 컬러에서 채도가 떨어지거나 채색 된 배경에 혼합 (혼합 모드 곱하기)하는 것입니다.

다음은 빨간색 이미지가 어두운 색이므로 주황색 및 노란색의 경우 원본 이미지의 색이 노란색을 통해 어두워지면서 보여 주므로 시도한 이미지의 예입니다. 그래서 이미지는 채도가 떨어질 필요가 있습니다. 마지막 예제 # yellow2는 어떻게 불포화를 달성하려했으나 이미지가 블렌드 모드를 무시하게 만듭니다.

<div id="red"></div> 

<div id="orange"></div> 

<div id="yellow"></div> 

<div id="yellow2"></div> 

    #red{ 
width:250px; 
height:200px; 
background:red url(http://www.mucky-pups.co/wp-content/uploads/2013/05/9.jpg); 
background-size:250px 200px;} 

#red:hover{ 
background-blend-mode: multiply; } 

#orange{ 
width:250px; 
height:200px; 
background:orange url(http://0.tqn.com/d/friendship/1/S/R/-/-/-/special-dog-breeds.jpg); background-size:250px 200px;} 

#orange:hover{ 
background-blend-mode: multiply;} 

#yellow{ 
width:250px; 
height:200px; 
background:yellow url(http://stylonica.com/wp-content/uploads/2014/03/Puppy-3-dogs-1993798-1024-76811.jpg); background-size:250px 200px;} 

#yellow:hover{ 
background-blend-mode: multiply;} 

#yellow2{ 
width:250px; 
height:200px; 
background:yellow url(http://stylonica.com/wp-content/uploads/2014/03/Puppy-3-dogs-1993798-1024-76811.jpg); background-size:250px 200px; 
} 

#yellow2:hover{ 
background-blend-mode: multiply; 
filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); 
filter: gray; 
-webkit-filter: grayscale(100%);} 

http://jsfiddle.net/cstr44/dzwH4/2/

내가 당신이 계신 달성했다고 생각 (모든 이미지의 흐릿한 버전을 만드는 것보다 다른)이 가능? 될 수도 다른 방법

Answer 1

있습니다. 이 솔루션은 현재 Chrome에서만 작동합니다.

효과를 보려면 chrome : // flags/및 "실험용 웹 플랫폼 기능 사용"을 방문하십시오.

필터와 블렌드 모드를 같은 요소에 적용한 경우 실패했습니다. 사실 이미지를 사용하여 요소에 회색 음영 필터를 계속 사용하려고 시도한 다음 새 요소를 중첩하여 혼합 혼합 모드를 시도했습니다. 그것은 또한 실패했다.

궁극적으로, 나는 이미지 위에 두 개의 새로운 요소 (레이어)를 만들었습니다. 그런 다음 믹스 - 블렌드 모드를 사용하여 효과를 얻었습니다. 첫 번째 요소 (이미지 바로 위의 레이어)는 혼합 혼합 모드를 사용했습니다. 배경색이 검정색 (또는 흰색) 인 채도로 이미지를 회색조로 변환합니다. 맨 위에있는 요소는 노란색이며 혼합 - 혼합 모드 : 곱하십시오.

전 (前) 및 : 후 (after)라는 의사 요소를 사용하여 마크 업을 변경하지 않고 그대로 둘 수있었습니다. 당신은 크로스 브라우저 솔루션을 찾고 있다면

<div id="red"></div> 

<div id="orange"></div> 

<div id="yellow"></div> 

<div id="yellow2"></div> 

#red{ 
width:250px; 
height:200px; 
background:red url(http://www.mucky-pups.co/wp-content/uploads/2013/05/9.jpg); 
background-size:250px 200px;} 

#red:hover{ 
background-blend-mode: multiply; } 

#orange{ 
width:250px; 
height:200px; 
background:orange url(http://0.tqn.com/d/friendship/1/S/R/-/-/-/special-dog-breeds.jpg); background-size:250px 200px;} 

#orange:hover{ 
background-blend-mode: multiply;} 

#yellow{ 
width:250px; 
height:200px; 
background:yellow url(http://stylonica.com/wp-content/uploads/2014/03/Puppy-3-dogs-1993798-1024-76811.jpg); background-size:250px 200px;} 

#yellow:hover{ 
background-blend-mode: multiply;} 

#yellow2{ 
    width:250px; 
    height:200px; 
    background:yellow url(http://stylonica.com/wp-content/uploads/2014/03/Puppy-3-dogs-1993798-1024-76811.jpg); background-size:250px 200px; 
    position: relative; 
} 

#yellow2:after, #yellow2:before { 
    content: ' '; 
    display: none; 
    height: 100%; 
    left: 0; 
    position: absolute; 
    top: 0; 
    width: 100%; 
} 
#yellow2:before { 
    background-color: black; 
    mix-blend-mode: saturation; 
} 
#yellow2:after { 
    background-color: yellow; 
    mix-blend-mode: multiply; 
} 

#yellow2:hover:before, #yellow2:hover:after { 
    display: block; 
} 

http://jsfiddle.net/dzwH4/8/

, 당신은 IE < = 9에 대해 같은 (등 FF, IE10) SVG에 대한 feBlend를 사용하여 접근 방법과 dxFilters 걸릴 수 있습니다.

UPDATE :

가 여기에 내가 크롬, FF, 오페라, IE10, IE11, 사파리 7 OSX에서 테스트 SVG 솔루션입니다.

http://jsfiddle.net/5pmmet6b/4/

<div id="puppy"> 
    <svg> 
     <defs> 
      <filter id="colorize_yellow" color-interpolation-filters="sRGB"> 
       <feFlood flood-color="yellow" result="A"/> 
       <feColorMatrix type="saturate" in="SourceGraphic" values="0" result="B"/> 
       <feBlend mode="multiply" in2="B" in="A"/> 
      </filter> 
     </defs> 
     <image id="yellow" filter="url(#colorize_yellow)" x="0" y="0" width="100%" height="100%" xlink:href="http://stylonica.com/wp-content/uploads/2014/03/Puppy-3-dogs-1993798-1024-76811.jpg"/> 
    </svg> 
</div> 

#puppy { 
    background: url('http://stylonica.com/wp-content/uploads/2014/03/Puppy-3-dogs-1993798-1024-76811.jpg'); 
    background-size: 249px 187px; 
    position: relative; 
} 
#puppy svg { 
    left: 0; 
    overflow: hidden; 
    position: absolute; 
    top: 0; 
} 
#puppy, #puppy svg { 
    height: 187px; 
    width: 249px; 
} 
#yellow { 
    opacity: 0; 
} 
#yellow:hover { 
    opacity: 1; 
} 

이전 인터넷 익스플로러 방법 : IE 6-9에서

작품 : 그냥이 볼 만

<!DOCTYPE html> 

<html> 

<head> 
    <title>Light Filter Sample</title> 
    <style type="text/css"> 
     div, img { 
      height: 200px; 
      width: 250px; 
     } 
     #image { 
      position: relative; 
     } 
     #grayscale { 
      -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(grayscale=1)"; 
      filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1); 
     } 
     #yellow { 
      display: none; 
      -ms-filter: "progid:DXImageTransform.Microsoft.Light()"; 
      filter: progid:DXImageTransform.Microsoft.Light(); 
      left: 0; 
      position: absolute; 
      top: 0; 
     } 
     /* NOTE: you'll need to use script for hovering support on IE6 */ 
     #image:hover #yellow { 
      display: block; 
     } 
    </style> 
    <script type="text/javascript"> 
     window.onload = function() { 
      document.getElementById('yellow').filters.item("DXImageTransform.Microsoft.Light").addAmbient(255, 255, 0, 100); 
     } 
    </script> 
</head> 

<body> 
    <div id="image"> 
     <img src="http://stylonica.com/wp-content/uploads/2014/03/Puppy-3-dogs-1993798-1024-76811.jpg" alt=""> 
     <div id="yellow"> 
      <div id="grayscale"> 
       <img src="http://stylonica.com/wp-content/uploads/2014/03/Puppy-3-dogs-1993798-1024-76811.jpg" alt=""> 
      </div> 
     </div> 
    </div> 
</body> 

</html>