이 게시물은 CSS의 도움으로 전환을 설정하는 방법을 설명합니다. 표시하다 ' 그리고 ' 불투명 ' 속성.
CSS '표시' 및 '불투명도' 속성을 전환하는 방법은 무엇입니까?
CSS를 전환하려면 ' 표시하다 ' 그리고 ' 불투명 ” 속성, 먼저 “로 div 컨테이너를 만듭니다. <사업부> ' 요소. 그런 다음 div 컨테이너에 액세스하고 ' 배경 이미지 ' 재산. 그 후 ' 이행 ”, “ 불투명 ” 및 기타 필수 속성을 선택에 따라 선택합니다.
1단계: 'div' 컨테이너 생성
처음에는 '의 도움으로 div 컨테이너를 만듭니다. <사업부> ” 컨테이너에 추가하고 특정 이름을 가진 클래스 속성을 추가합니다. 이를 위해 클래스 이름을 ' 안건 ”:
<사업부 클래스 = '메인 아이템' > >
2단계: '디스플레이' 속성 설정
다음으로 클래스 이름 '을 활용하여 div 컨테이너에 액세스합니다. 메인 아이템 ”를 설정하고 “ 표시하다 ' 재산:
.main-item {
표시하다 : 차단하다 ;
}
여기서 '의 값은 표시하다 ” 속성이 “로 설정됩니다. 차단하다 ” 모든 화면 너비를 차지합니다.
3단계: 배경 이미지 추가
다음으로 액세스된 div 컨테이너에 다음 CSS 속성을 적용합니다.
.main-item {키 : 400픽셀 ;
너비 : 400픽셀 ;
배경 이미지 : URL ( 봄꽃.jpg ) ;
불투명 : 0.1 ;
이행 : 불투명 2초 이지인 아웃 ;
여유 : 30픽셀 50픽셀 ;
}
위에서 언급한 코드 스니펫에서:
- “ 키 ' 그리고 ' 너비 ” 속성은 정의된 요소의 크기를 결정합니다.
- “ 배경 이미지 ” CSS 속성은 “ URL() ” 요소의 뒷면에 기능.
- “ 불투명 ”는 요소의 불투명도 수준을 결정합니다. 불투명도 수준은 투명도 수준을 나타내며 ' 1 ”는 투명도가 없는 경우에 사용되며 “ 0.5 '는 '을 위한 것입니다. 오십% ” 투명성.
- “ 이행 ” CSS에서 사용자는 지정된 기간 동안 속성 값을 원활하게 변경할 수 있습니다.
- “ 여유 ”는 요소 주위에 정의된 경계 밖의 공간을 정의합니다.
산출
4단계: ':hover' 의사 선택기 적용
이제 '를 따라 div 컨테이너에 액세스합니다. :호버 ” 요소 위로 마우스를 가져갈 때 요소를 선택하는 데 사용되는 의사 선택기:
.main-item : 호버링 {불투명 : 1 ;
}
그런 다음 ' 불투명 '로 선택한 요소의 1 ” 투명도를 제거합니다.
산출
전환 CSS '표시' 및 '불투명도' 속성을 설정하는 것이 전부입니다.
결론
트랜지션 '표시' 및 '불투명도' 속성을 설정하려면 먼저