CSS에서 라벨을 숨기는 방법

방법: 1. "opacity:0" 문을 사용합니다. 2. "display:none" 문을 사용합니다. 3. "visibility:hidden" 문을 사용합니다. 4. 위쪽, 아래쪽, 왼쪽에 위치 속성을 사용합니다. , 및 오른쪽 속성에 대한 요소 레이블이 시각적 영역 밖으로 이동합니다.

이 튜토리얼의 운영 환경: Windows7 시스템, CSS3&&HTML5 버전, Dell G3 컴퓨터.

첫 번째 방법은 불투명도 속성을 사용하는 것입니다.

이 속성은 객체의 불투명도를 검색하거나 설정하는 것을 의미합니다. 투명도가 0이면 시각적으로 사라지지만 여전히 해당 위치를 차지합니다. 웹 페이지. 또한 사용자 상호 작용에도 응답합니다. 이 속성이 추가된 요소의 경우 배경과 요소 콘텐츠도 그에 따라 변경됩니다. 이 기능을 사용하여 여기에 간단한 작은 효과를 만들 수 있습니다.

참고: 이 속성은 IE9 이상 브라우저와 호환되며 이전 버전에서는 filter:Alpha(opacity=50)와 같은 대체 필터 속성을 지원합니다.

두 번째 방법은 Display 속성을 사용하는 것입니다.

이 속성은 실제 숨겨진 요소입니다. 요소의 표시 속성이 없음이면 해당 요소가 비전에서 사라지고 상자 모델도 숨겨집니다. 생성되지 않으며 페이지의 어떤 위치도 차지하지 않습니다. 뿐만 아니라 해당 하위 요소도 상자 모델에서 함께 사라집니다. 해당 항목과 해당 하위 요소에 추가된 애니메이션 효과 및 상호 작용은 아무런 효과가 없습니다. jq의 show(), hide() 및 Toggle() 메소드는 표시 값을 변경하여 변경 효과를 얻습니다.

세 번째 방법은 Visibility 속성을 사용하는 것입니다.

이 속성은 opacity 속성과 유사합니다. 속성 값이 숨겨지면 요소가 숨겨지고 자체 위치를 차지하며 레이아웃에 영향을 줍니다. 불투명도와의 유일한 차이점은 사용자 상호 작용에 반응하지 않는다는 것입니다. 또한 화면 읽기 소프트웨어에서는 요소가 숨겨집니다. 이 속성은 초기 상태와 종료 상태가 다른 한 애니메이션을 적용할 수도 있습니다. 이렇게 하면 가시성 상태 전환 사이의 전환 애니메이션이 시간에 맞춰 원활하게 진행될 수 있습니다.

참고:

1 Internet Explorer의 모든 버전(IE8 포함)은 "상속" 및 "축소" 속성 값을 지원하지 않습니다.

2. 요소의 가시성을 숨김으로 설정했지만 해당 하위 요소를 표시하려면 표시하려는 하위 요소에 visible:을 추가하세요. p 태그의 숫자 위에 마우스를 올려놓는 대신 숨겨진 요소 위에 마우스를 올려보세요. 마우스 커서가 손가락으로 바뀌지 않는 것을 확인할 수 있습니다. 이때 마우스를 클릭해도 클릭 이벤트가 발생하지 않습니다.

태그 내의

태그는 여전히 모든 마우스 이벤트를 캡처할 수 있습니다. 마우스를 텍스트 위로 이동하면

자체가 표시되고 이벤트 등록이 적용됩니다.

네 번째 방법은 위치 속성을 사용하는 것입니다.

이 속성의 의미는 요소를 문서 흐름 및 시각적 영역 밖으로 이동하는 것입니다. 이 속성을 추가하면 레이아웃에 영향을 미치지 않지만 유지됩니다. 요소 작동 가능. 이 속성을 적용한 후 주로 방향(위, 왼쪽, 오른쪽, 아래)을 제어하여 특정 값에 도달하고 현재 페이지에서 나갈 수 있습니다.

참고: 이 방법을 사용하여 포커스 가능한 요소를 숨기면 안 됩니다. 그렇게 하면 사용자가 해당 요소에 포커스를 줄 때 예측할 수 없는 포커스 전환이 발생하기 때문입니다. 이 방법은 사용자 정의 체크박스와 라디오 버튼을 만들 때 자주 사용됩니다.

추천 학습: css 비디오 튜토리얼

위 내용은 CSS에서 라벨을 숨기는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!