두 번째 이미지 없이 마우스를 가져가는 동안 HTML 이미지의 모양을 변경할 수 있나요?
문제
아이콘의 모양을 변경하는 방법이 있습니까(예:대비/광도) 두 번째 이미지 파일이 필요 없이(또는 이미지의 숨겨진 부분이 필요 없이) 커서를 가리키면 어떻게 되나요?
해결책
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 스프라이트라고 합니다.
여기에 사용할 몇 가지 코드가 있습니다.기본 아이디어:그림의 가능한 모든 상태를 하나의 큰 이미지에 넣고 이미지보다 작은 "창 크기"를 설정합니다.다음을 사용하여 창을 이동합니다. 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>
일반적으로 버튼과 같은 작은 이미지로 작업을 수행하는 방식은 이미지의 특정 부분만 표시되는 방식입니다.그러면 그림의 많은 상태가 보이는 포트 뒤로 이동되는 더 큰 그림을 구성하게 됩니다.누군가 코드를 가지고 있으면 삭제하겠습니다.
제휴하지 않습니다 StackOverflow