마우스 포인터 아래에서 JS 또는 CSS로 이미지 불투명도를 변경 하시겠습니까?

웹 페이지에서 마우스를 가리킬 때 투명하게 보이지만 마우스 포인터에 가장 가까운 일부 영역에서만 투명하게되고 포인터로 해당 영역을 이동하는 이미지를 갖고 싶습니다.마우스 포인터 아래에서 JS 또는 CSS로 이미지 불투명도를 변경 하시겠습니까?

간단한 불투명 전환은 쉽게 CSS 달성 할 수 있습니다

친절에 마우스 사라지고 밖으로 마우스에 다시 나타나는 이미지를 만듭니다

<style type="text/css"> 
     img.transparent { 
      opacity: 1; 
      -webkit-transition: opacity 1s; 
      -moz-transition: opacity 1s; 
      transition: opacity 1s; 
     } 
     img.transparent:hover { 
      opacity: 0; 
     } 
    </style> 
    <img class="transparent" src="1.jpg">

그러나 내가 달성하고 싶은 것은 마우스 포인터 근처의 일부 영역에 대해서만 동일한 효과가 있습니다. 그래서 그것은 포인터 위에 투명한 영역이있을 것이고, 이미지 위에 움직일 것입니다.

CSS 또는 JS로이를 달성 할 수있는 방법이 있습니까?

감사합니다.

출처

2014-12-19 Andrey Gusakov

어떻게 이미지 위로 마우스를 이동하고 그것과 흰색 배경 및 스위치로 사용자 정의 커서를 만드는 방법에 대한? – philtune

** 요소를 통해 **를 볼 수 있습니까? CSS가 아니기 때문에 JS도 꽤 펑키하다고 생각합니다. –

답변이나 순수한 자바 스크립트에서 jQuery를 사용할 수 있습니까? – Rimble

이을 사용하여 원하는 것을 정확하게 제공 (임의의) 마스크. 다음은 직사각형 마스크의 데모이지만 원하는 모양으로 쉽게 수정할 수는 있습니다. 이 버전은 Firefox 및 Chromium의 최신 버전에서 작동하며 SVG 요소를 통해보다 복잡한 모양을 허용합니다.

매우 불량한 코드입니다. 어떤 프로젝트에서든 사용하고 싶다면 그 내용을 써야합니다. 그러나 그 아이디어는 거기에 있습니다.

데모 : http://jsfiddle.net/WK_of_Angmar/f8oe7hcq/

<!DOCTYPE html> 
<html> 
    <head> 
     <script type="application/javascript"> 
      window.addEventListener("load", function() { 
       var img = document.getElementsByTagName("image")[0]; 
       var imgPos = img.getBoundingClientRect(); 
       var imgX = imgPos.left; 
       var imgY = imgPos.top; 
       var rect = document.getElementsByTagName("rect")[1]; 
       var rectHalfWidth = rect.getAttribute("width")/2; 
       var rectHalfHeight = rect.getAttribute("height")/2; 
       img.addEventListener("mousemove", function(e) { 
        rect.setAttribute("x", e.clientX - imgX - rectHalfWidth); 
        rect.setAttribute("y", e.clientY - imgY - rectHalfHeight); 
        }, false); 
      }, false); 
     </script> 
     <style> 
      svg { 
       width: 320px; 
       height: 166px; 
      } 
      body { 
       background-color: red; 
       background-image: url("https://upload.wikimedia.org/wikipedia/commons/thumb/7/76/Mozilla_Firefox_logo_2013.svg/226px-Mozilla_Firefox_logo_2013.svg.png"); 
      } 
      image:hover { 
       mask: url("#cursorMask"); 
      } 
     </style> 
    </head> 
    <body> 
     <svg> 
      <defs> 
       <mask id="cursorMask" maskUnits="objectBoundingBox" maskContentUtils="objectBoundingBox"> 
        <g> 
        <!-- the SECOND rect element is what determines the transparent area --> 
        <rect x="0" y="0" width="320" height="166" fill="#FFFFFF" /> 
        <rect x="0" y="0" width="100" height="100" fill="#000000" /> 
        </g> 
       </mask> 
      </defs> 
     <image width="320" height="166" xlink:href="https://upload.wikimedia.org/wikipedia/commons/d/d4/Firefox-33-xfce.png" /> 
     </svg> 
    </body> 
</html>

출처

2014-12-19 21:17:31

당신이 맞습니다, CSS 마스크를 svg 마스크로 변경하면 Firefox 호환성을 얻을 수 있습니다 – vals

좋아요! 감사! 나는 어떤 종류의 가면이 있어야하지만, 오늘날의 기술을 인식하지 못하고 그것을 google 할 수 없었다고 생각합니다. –

내가 상상 한 것은 밑에있는 레이어에 변색 된 뷰포트의 종류였습니다. 코드에서 쉽게 얻을 수 있습니다. http://jsfiddle.net/j6fv5Lk9/35/ –

마스킹을 사용하여 얻을 수 있습니다. 그것은 제한적인 지원을하고있다,하지만 당신은 애송이들이다 제안으로

필요한 CSS

#test { 
    top: 0px; 
    left: 0px; 
    -webkit-mask-position: -20px -20px; 
    -webkit-mask-size: 200px 400px; 
    -webkit-mask-image: radial-gradient(circle, rgba(0, 0, 0, 0) 32px, rgba(0, 0, 0, 1) 38px); 
    background-color: white; 
    border: solid 1px red; 
    width: 200px; 
    height: 200px; 
    background-image: url('http://placekitten.com/g/200/300'); 
} 

body { 
    background: repeating-linear-gradient(45deg, lightgreen 0px, white 50px); 
}

일부 스크립트가 이동하려면

document.getElementById("test").addEventListener('mousemove', mouseMove, false); 

function mouseMove (event) 
{ 
    var ele = document.getElementById ('test'); 

    ele.style.webkitMaskPositionX = event.offsetX - 100 + "px"; 
    ele.style.webkitMaskPositionY = event.offsetY + 200 + "px"; 
}

demo - only webkit

출처

2014-12-19 20:00:56 vals

이 솔루션은 최신 버전의 Chromium에서 테스트했을 때 모서리를 감싸는 것처럼 보입니다. 원하지 않는 동작 일 것이라고 생각합니다. http://webmup.com/tTn8y/vid.webm –

마우스 포인터 아래에서 JS 또는 CSS로 이미지 불투명도를 변경 하시겠습니까?

답변

관련 문제