마우스를 가져 가면 이미지 색상을 수정하고 편집 할 수 있습니까? 나도 같은 행동을 복제하기 위해 노력하고있어 <a href="http://thebandcalledboy.com/" rel="nofollow">http://thebandcalledboy.com/</a></p> <p>: 이미지의 색상이 변경되는 위치를 마우스 이미지를 가져 가면

Question

는 여기 시각화를 참조하십시오. 모든 단서?

Answer 1

": hover"가상 클래스를 사용하면 위에 놓은 요소에 다른 스타일을 사용할 수 있습니다. 예를 들어,이 같은 요소가있는 경우 :

가

.my-element { 
    background: green; 
    } 
    .my-element:hover { 
    background: red; 
    } 

은 위의 코드는 호버 만에 빨간색 배경 요소를 제공합니다 : 그것은 가리킬 때 다른 요소 스타일을 지정할 수 있습니다

<div class="my-element">Content</div> 

을 그렇지 않으면 녹색 배경. 두 가지 다른 배경 이미지를 선택하거나 동일한 이미지를 재사용하지만 그 위에 다른 색상 마스크를 적용하는 것과 유사한 기술 (다른 CSS 속성이 있음에도 불구하고)을 사용할 수 있습니다.

Answer 2

크롬을 사용하는 경우 image-> inspect 요소를 마우스 오른쪽 버튼으로 클릭합니다.

element.style { 
} 
thebandcalledboy.com/media="all" 
#center .black { 
width: 96%; 
height: 97%; 
margin: 2%; 
background: #000; 
} 
user agent stylesheetdiv { 
display: block; 
} 
Inherited from body 
Style Attribute { 
font-size: 7.9375px; 
} 
thebandcalledboy.com/media="all" 
html, body { 
width: 100%; 
height: 100%; 
margin: 0; 
padding: 0; 
overflow: hidden; 
font-family:'PerpetuaRegular',arial,sans-serif; 
font-size: 20px; 
} 
Inherited from html.js.textshadow.fontface.audio.svg 
thebandcalledboy.com/media="all" 
html, body { 
width: 100%; 
height: 100%; 
margin: 0; 
padding: 0; 
overflow: hidden; 
font-family: 'PerpetuaRegular',arial,sans-serif; 
font-size: 20px; 
} 

은 마찬가지로이

계산

및 이벤트 리스너를 참조하십시오

HTML: 

</div> 
     <img src="sites/all/themes/boy/images/boy_logo.png" class="logo" alt=""/> 
    </div> 

CSS : 당신이 얻을 것이다 것은 이것이다.

Answer 3

나는 스크린상의 비정상적인 PGraphic 개체 위에 색을 그리고 PImage 블렌드 함수와 같은 것을 사용하여 그 색을 소년 얼굴의 템플릿 위에 가려서 사용한다고 생각한다.