두 번째 이미지 없이 마우스를 가져가는 동안 HTML 이미지의 모양을 변경할 수 있나요?

StackOverflow https://stackoverflow.com/questions/60290

  •  09-06-2019
  •  | 
  •  

문제

아이콘의 모양을 변경하는 방법이 있습니까(예:대비/광도) 두 번째 이미지 파일이 필요 없이(또는 이미지의 숨겨진 부분이 필요 없이) 커서를 가리키면 어떻게 되나요?

도움이 되었습니까?

해결책

CSS를 사용한 이미지 불투명도 및 투명도에 대한 유용한 정보는 다음과 같습니다..

따라서 불투명도가 50%인 이미지를 만들려면 다음을 수행합니다.

<img src="image.png" style="opacity: 0.5; filter: alpha(opacity=50)" />

그만큼 불투명: 부분은 Firefox가 수행하는 방식이며 0.0에서 1.0 사이의 값입니다. 필터: IE가 수행하는 방식이며 0에서 100 사이의 값입니다.

다른 팁

img 태그를 사용하지 않고 background-image css 속성이 있는 요소를 사용하고 마우스를 올리면 배경 위치를 설정합니다.IE에서는 :hover 선택기의 상위 요소로 'a' 태그가 필요합니다.CSS 스프라이트라고 합니다.

CSS 스프라이트를 사용하는 방법을 설명하는 훌륭한 기사.

여기에 사용할 몇 가지 코드가 있습니다.기본 아이디어:그림의 가능한 모든 상태를 하나의 큰 이미지에 넣고 이미지보다 작은 "창 크기"를 설정합니다.다음을 사용하여 창을 이동합니다. background-position.

#test {
  display: block;
  width: 250px;  /* window */
  height: 337px; /*  size  */
  background: url(http://vi.sualize.us/thumbs/08/09/01/fashion,indie,inspiration,portrait-f825c152cc04c3dbbb6a38174a32a00f_h.jpg) no-repeat; /* put the image */
  border: 1px solid red; /* for debugging */
  text-indent: -1000px; /* hide the text */
}

#test:hover {
  background-position: -250px 0; /* on mouse over move the window to a different part of the image */
}
<a href="#" id="test">a button</a>

일반적으로 버튼과 같은 작은 이미지로 작업을 수행하는 방식은 이미지의 특정 부분만 표시되는 방식입니다.그러면 그림의 많은 상태가 보이는 포트 뒤로 이동되는 더 큰 그림을 구성하게 됩니다.누군가 코드를 가지고 있으면 삭제하겠습니다.

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top