CSS3 표시 숨기기
May 27, 2023 pm 01:50 PMCSS3는 최신 CSS 사양으로 웹 디자인 효과를 더욱 다채롭게 만들어줍니다. 일반적으로 사용되는 기능 중 하나는 표시 및 숨기기입니다.
CSS3에서 표시 및 숨기기를 구현하는 방법에는 여러 가지가 있으며, 아래에 소개되어 있습니다.
1. 표시 속성을 사용하세요.
표시 속성은 다음을 포함하여 요소의 표시 상태를 제어할 수 있습니다.
- none: 페이지에서 공간을 차지하지 않고 요소를 숨깁니다.
- block: 요소를 블록 요소로 표시합니다.
- inline: 요소를 인라인 요소로 표시합니다.
- inline-block: 요소를 인라인 블록 요소로 표시합니다.
display 속성의 값을 변경하면 요소를 표시하거나 숨길 수 있습니다. 예를 들어, 다음 코드는 요소 위로 마우스를 가져갈 때 이미지를 표시합니다.
img { display: none; } div:hover img { display: block; }
위 코드에서 이미지의 초기 표시 속성은 없음, 즉 숨겨진 상태로 설정됩니다. 그런 다음 div:hover img를 통해 div 요소 위로 마우스를 가져갈 때 이미지의 표시 속성을 block으로 설정하여 표시합니다.
2. 가시성 속성 사용
가시성 속성은 요소의 가시성을 제어합니다. 표시 속성과 달리 가시성 속성을 숨김으로 설정해도 페이지의 공간을 차지합니다. 해당 값은 다음과 같습니다.
- visible: 요소가 표시됩니다.
- hidden: 요소는 보이지 않지만 여전히 페이지 공간을 차지합니다.
다음 코드는 요소 위로 마우스를 가져갈 때 텍스트 콘텐츠 표시를 구현합니다.
div { visibility: hidden; } div:hover { visibility: visible; }
위 코드에서 div 요소의 초기 가시성 속성은 숨김, 즉 숨김으로 설정됩니다. 그런 다음 div:hover를 통해 마우스를 div 요소 위로 가져가면 해당 요소의 가시성 속성이 visible로 설정되어 표시됩니다.
3. 불투명도 속성을 사용하세요.
불투명도 속성은 요소의 투명도를 제어합니다. 값 범위는 0~1이며, 0은 완전히 투명함을 의미하고 1은 완전히 불투명함을 의미합니다. 요소의 불투명도 속성 값을 변경하면 해당 요소를 표시하거나 숨길 수 있습니다. 예를 들어, 다음 코드는 마우스를 요소 위로 가져갈 때 요소가 페이드 인 및 페이드 아웃되는 효과를 구현합니다.
div { opacity: 0; transition: opacity .5s ease-in-out; } div:hover { opacity: 1; }
위 코드에서 div 요소의 초기 불투명도 속성은 완전히 투명한 0으로 설정됩니다. . 그런 다음 div:hover를 통해 마우스가 div 요소 위에 있을 때 요소의 불투명도 속성을 완전히 불투명한 1로 설정합니다. 동시에 페이드인 및 페이드아웃 효과를 얻기 위해 전환 속성이 추가됩니다.
위 내용은 CSS3를 사용하여 표시하고 숨기는 여러 가지 방법으로, 필요에 따라 선택할 수 있습니다. CSS3는 일부 이전 브라우저와 호환되지 않는다는 점은 주목할 가치가 있으므로 코드를 작성할 때 호환성 문제를 고려해야 합니다.
위 내용은 CSS3 표시 숨기기의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

인기 기사

인기 기사

뜨거운 기사 태그

메모장++7.3.1
사용하기 쉬운 무료 코드 편집기

SublimeText3 중국어 버전
중국어 버전, 사용하기 매우 쉽습니다.

스튜디오 13.0.1 보내기
강력한 PHP 통합 개발 환경

드림위버 CS6
시각적 웹 개발 도구

SublimeText3 Mac 버전
신 수준의 코드 편집 소프트웨어(SublimeText3)

뜨거운 주제











useeffect 란 무엇입니까? 부작용을 수행하는 데 어떻게 사용합니까?

카레는 JavaScript에서 어떻게 작동하며 그 이점은 무엇입니까?

JavaScript의 고차 기능은 무엇이며 어떻게 간결하고 재사용 가능한 코드를 작성하는 데 어떻게 사용할 수 있습니까?

React Reconciliation 알고리즘은 어떻게 작동합니까?

usecontext는 무엇입니까? 구성 요소간에 상태를 공유하는 데 어떻게 사용합니까?
