HTML 및 CSS를 사용하여 이미지 색상을 변경하기 위해 채우기 색상을 제거하는 방법은 무엇입니까?

웹 개발 세계에서 웹 사이트에 멋진 시각적 요소를 추가하려면 최신 CSS 및 HTML 기술을 아는 것이 중요합니다. 이러한 효과 중 하나는 색상 드롭 효과입니다. 이 효과를 사용하면 이미지 위에 채우기 색상을 배치하여 마우스를 올리면 이미지의 색상을 변경할 수 있습니다.

이 효과를 사용하면 웹사이트를 방문자에게 더욱 상호 작용적이고 매력적으로 만들 수 있습니다. 이 글에서는 HTML과 CSS를 사용하여 색상 드롭 효과를 만드는 과정을 안내합니다. 따라서 초보자이든 숙련된 웹 개발자이든 이 흥미로운 시각적 요소에 대해 계속해서 알아가시기 바랍니다.

채우기 색상 효과란 무엇인가요?

채우기 색상 효과는 HTML 및 CSS를 사용하여 이미지나 그래픽에 적용되는 시각 효과로, 마우스를 이미지 위로 가져갈 때 이미지에 색상 방울이 나타나 이미지 색상이 변경됩니다.

이 효과는 이미지에 색상이 떨어지는 듯한 착각을 일으키고 드라마틱하고 역동적인 효과를 만들어냅니다. 이 효과를 사용하면 웹사이트에 상호작용성과 시각적 매력을 더해 사용자의 참여도를 높일 수 있습니다.

이 효과를 얻으려면 특정 속성을 사용해야 합니다. 하나씩 살펴보겠습니다. -

• Filter Property - CSS의 filter 속성은 요소의 콘텐츠에 시각 효과를 적용하는 데 사용됩니다. 다양한 필터 기능을 사용하여 이미지 및 기타 그래픽 요소의 모양을 조정할 수 있습니다.

filter 속성은 순차적으로 적용되는 하나 이상의 필터 기능을 사용할 수 있습니다. 다양한 필터 기능을 사용할 수 있으며 각각 다른 유형의 시각 효과를 적용합니다.

• clip-path 속성 − 클립 경로 CSS 속성은 요소의 표시 영역을 정의하는 직사각형이 아닌 영역인 클리핑 경로를 만드는 데 사용됩니다. 이 속성은 클리핑 패스 범위를 벗어나는 요소의 일부를 숨기는 데 사용되며, 이전에는 이미지 마스크나 SVG에서만 가능했던 복잡한 모양과 효과를 가능하게 합니다.

• ::before 의사 요소 − CSS의 ::before 의사 요소는 요소의 콘텐츠 앞에 삽입되는 의사 요소를 생성합니다. 추가 HTML 태그를 추가하지 않고 요소 앞에 내용을 삽입하는 데 사용됩니다.

::before 의사 요소의 일반적인 용도는 요소 앞에 아이콘이나 모양과 같은 장식 콘텐츠를 추가하는 것입니다. ::before 의사 요소를 사용하여 텍스트, 배경 이미지 및 기타 콘텐츠를 추가할 수도 있습니다.

따라야 할 단계

이 예에서 수행된 단계는 다음과 같습니다. -

• 1단계 - .icon-container div를 사용하여 아이콘/이미지 컨테이너를 만듭니다. 페이지의 모든 요소에 box-sizing: border-box를 적용하고 모든 요소에 대해 여백과 패딩을 0으로 설정합니다.

• 2단계 - 그런 다음 body 요소를 display: flex와 justify-content: center 및 align-items: center로 설정하여 컨테이너 요소를 페이지의 수직 및 수평 중앙에 배치합니다. body 요소의 배경색은 어두운 회색 (#333)으로 설정되었습니다.

• 3단계 − 다음으로 색상 드롭 효과를 사용하여 컨테이너 요소에 스타일을 추가해야 합니다. 여기에는 상대적인 위치, 200픽셀의 너비와 높이, 중앙에 위치하고 전체 컨테이너 요소를 덮는 배경 이미지가 제공됩니다.

filter 속성은 배경 이미지를 회색조(예: 흑백)로 설정하는 데 사용되며 cursor 속성은 pointer b>로 설정되어 요소를 클릭할 수 있음을 사용자에게 나타냅니다.

• 4단계 - 그런 다음 호버에 색상 드롭 효과를 만듭니다. ::before 의사 요소를 사용하여 마우스를 올리면 잘리는 흰색 원을 만들어 기본 배경 이미지를 표시합니다.

clip-path 속성은 circle(0% at 50% 0%)로 설정되어 있으며 컨테이너 요소의 중앙 상단에서 반경이 0%(즉, 가시 영역 없음)인 클리핑 원으로 시작합니다. .

마우스가 요소 위에 있으면 clip-path 속성이 circle(100% at 50% 0%)으로 전환되어 전체 컨테이너 요소를 덮는 원이 생성됩니다. 이 전환 애니메이션의 지속 시간은 이즈 아웃 시간 기능을 사용하여 0.4초입니다.

예

예시를 보시죠 -

결론

요약하자면, HTML 및 CSS에서 색상 드롭 효과를 사용하는 것은 웹사이트나 웹 애플리케이션의 시각적 매력을 향상시키는 재미있고 창의적인 방법이 될 수 있습니다. 마우스를 올리면 이미지 색상을 변경할 수 있는 기능을 통해 동적 요소를 추가하여 사용자의 관심을 끌고 콘텐츠를 돋보이게 만들 수 있습니다.

이 기사에서는 컬러 드립 효과를 사용하여 이미지 색상을 변경하는 기본 사항을 살펴봅니다. 필터 속성을 사용하여 이미지의 회색조를 조작하고, :before 의사 요소를 사용하여 오버레이 효과를 만들고, 클립 경로 속성을 사용하여 마우스 오버 시 색상을 표시하는 원형 마스크를 만드는 방법을 다루었습니다.

이 효과를 구현하면 더욱 매력적인 사용자 경험을 만들고 웹 사이트에 개인화 기능을 추가할 수 있습니다. 약간의 실험과 창의성을 통해 이 기술을 한 단계 더 발전시켜 눈에 띄는 더욱 복잡한 색상 드리핑 효과를 만들 수도 있습니다.

위 내용은 HTML 및 CSS를 사용하여 이미지 색상을 변경하기 위해 채우기 색상을 제거하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!