CSS를 사용하여 마우스를 위에 올렸을 때 이미지를 회색으로 만드는 방법

웹 페이지에서 이러한 효과를 자주 볼 수 있습니다. 이미지 위로 마우스를 이동하면 이미지가 회색으로 변하거나 어두워집니다. 이는 실제로 이미지가 CSS에 의해 반투명 스타일로 설정되어 있기 때문입니다. 이 효과가 어떻게 달성되는지 예를 들어 보겠습니다.

a:hover img{filter:alpha(Opacity=80);-moz-opacity:0.8;opacity: 0.8;}

이 CSS 코드는 마우스를 A하이퍼링크로 이동하도록 설정하는 것입니다. 하이퍼링크의 이미지(img)는 반투명하게 나타나 80% 효과를 표시합니다. .

설명:

filter는 플랫폼 IE 반투명 효과 스타일을 설정합니다. 값은 1-100이며, 값이 작을수록 투명도가 높아집니다. IE8 이전에 투명도를 설정하려면

opacity를 사용하여 IE 반투명 효과를 설정하세요. 스타일, 값은 0.1-1, 값이 작을수록 투명할수록 IE8 이상 버전의 투명 사용을 설정합니다.

-moz-opacity Firefox와 같은 IE 브라우저 설정이 아닌 경우 구문은 동일합니다. IE

이 설정 CSS 스타일 불투명도 및 필터는 IE6에서 지원되지 않습니다. 이제 IE6 버전 공유가 급격히 감소했기 때문에 이 CSS에 대한 IE6의 지원은 일반적으로 고려되지 않습니다.

마우스를 움직이면 이미지의 색상이 바뀌고 이미지가 반투명해집니다.

예시 설명: 두 개의 DIV 상자를 설정하고 두 상자 각각에 그림을 넣은 다음 마우스를 가리키면(:hover) 설정됩니다. 그림이 80%와 70%로 투명해지면 효과를 관찰하세요.

1. 주요 CSS 코드

.p1,.p2{ width:500px; margin:20px auto} 
.p1 a:hover img{filter:alpha(Opacity=80);-moz-opacity:0.8;opacity: 0.8} 
.p2 a:hover img{filter:alpha(Opacity=70);-moz-opacity:0.7;opacity: 0.7}

DIVobject상자의 ​​하이퍼링크에 있는 이미지에 대한 hoverpseudo-class반투명 효과는 다음과 같습니다.

2. 주요 HTML 코드

<p>鼠标移动到图片悬停时，图片变色滤镜效果：</p> 
<p class="p1"><a href="#"><img  src="/static/imghwm/default1.png"  data-src="images/p-a-bg.png"  class="lazy"   / alt="CSS를 사용하여 마우스를 위에 올렸을 때 이미지를 회색으로 만드는 방법" ></a></p> 
<p class="p2"><a href="#"><img  src="/static/imghwm/default1.png"  data-src="images/an.gif"  class="lazy"   / alt="CSS를 사용하여 마우스를 위에 올렸을 때 이미지를 회색으로 만드는 방법" ></a></p>

이 사례를 읽으신 후 방법을 마스터하셨다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!

관련 읽기:

네이티브 js를 구성하는 일반적인 방법

Vue+CSS3을 사용하여 대화형 효과를 만드는 방법

프런트 엔드 반응형 레이아웃, 반응형 이미지 및 자체 제작에 대한 자세한 설명 그리드 시스템

위 내용은 CSS를 사용하여 마우스를 위에 올렸을 때 이미지를 회색으로 만드는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!