인라인 확대/축소 모드에서 기본 보기는 정적 이미지로 구성됩니다. 또한 정적 이미지 위의 플라이아웃 보기에 표시되는 확대/축소된 이미지와 정적 이미지 위에 표시되는 팁 메시지로 구성됩니다.
기본 뷰어 영역의 CSS 속성
기본 보기의 모양은 다음 CSS 클래스 선택기로 제어됩니다.
.s7mixedmediaviewer .s7flyoutzoomview
CSS 속성 |
설명 |
---|---|
background-color |
기본 보기의 배경색입니다. |
예 - 기본 보기를 투명하게 하려면 다음을 수행합니다.
.s7mixedmediaviewer .s7flyoutzoomview {
background-color: transparent;
}
팁 메시지의 모양은 다음 CSS 클래스 선택기로 제어됩니다.
.s7mixedmediaviewer .s7flyoutzoomview .s7tip
CSS를 통해 폰트 스타일, 크기 모양, 세로 오프셋 등을 구성할 수 있다. 그러나 수평 정렬은 뷰어 논리에 의해 관리됩니다. CSS를 통해 재정의 left
또는 right
속성은 지원되지 않습니다.
팁 메시지의 CSS 속성
CSS 속성 |
설명 |
---|---|
background-color |
메시지 배경 채우기 색입니다. |
border-radius |
메시지 배경 테두리 반경. |
하단 |
기본 뷰의 아래쪽에서 오프셋합니다. |
color |
팁 텍스트 색상. |
font-size |
글꼴 크기입니다. |
font-family |
글꼴 모음. |
불투명도 |
메시지 배경 불투명도입니다. |
패딩 |
메시지 텍스트 주위에 패딩. |
팁 메시지는 현지화할 수 있습니다. 다음을 참조하십시오 사용자 인터페이스 요소의 현지화 추가 정보.
예 - 흰색 Arial® 12px 글꼴, 기본 보기 아래쪽에서 오프셋된 50픽셀, 패딩 및 둥글게 표시된 테두리를 사용하여 반투명 팁 메시지를 설정하려면 다음을 수행하십시오.
.s7mixedmediaviewer .s7flyoutzoomview .s7tip {
bottom: 50px;
color: #ffffff;
font-family: Arial;
font-size: 12px;
padding-bottom: 10px;
padding-top: 10px;
padding-left: 12px;
padding-right: 12px;
background-color: #000000;
border-radius: 4px;
opacity: 0.5;
filter: alpha(opacity = 50);
}