CSS에서 텍스트를 숨기는 방법

텍스트를 숨기는 방법: 1. 표시 속성, 구문 "display:none;"을 사용합니다. 2. 가시성 속성, 구문 "visibility: hide;"를 사용합니다. 3. 불투명도 속성, 구문 "opacity"를 사용합니다. :0;".

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

1. 표시 속성을 사용하세요
요소의 표시 속성이 없음이면 해당 요소가 비전에서 사라지고 상자 모델도 생성되지 않습니다. 또한 페이지의 어떤 위치도 차지하지 않을 뿐만 아니라 해당 하위 요소도 상자 모델에서 함께 사라집니다.

.hide {
   display: none;
}

참고: 여기에 추가된 애니메이션 효과와 상호 작용 및 해당 하위 요소는 작동하지 않습니다.

2, 가시성 속성 사용
가시성 속성은 속성 값이 숨겨지면 요소가 숨겨지고 자체 위치를 차지하며 레이아웃에서 역할을 합니다. 웹 페이지는 불투명도와 유사합니다. 유일한 차이점은 사용자 상호 작용에 반응하지 않는다는 것입니다. 또한 화면 읽기 소프트웨어에서는 요소가 숨겨집니다.

.hide {
   visibility: hidden;
}

설명: 이 속성은 초기 상태와 종료 상태가 다른 한 애니메이션 효과를 얻을 수도 있습니다. 이를 통해 가시성 상태 전환 사이의 전환 애니메이션이 시간에 맞춰 원활하게 진행될 수 있습니다.

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

.hide {
  opacity: 0;
}

설명: 불투명도 속성을 사용하여 멋진 애니메이션 효과를 얻을 수 있습니다.
참고: 이 속성은 IE9 이상의 브라우저와 호환되며 이전 버전은 다음과 같은 대체 필터 속성을 지원합니다. filter:Alpha(opacity=50)

추천 학습:

css 비디오 튜토리얼

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