기본 보기는 정적 이미지와 플라이아웃 보기에 표시된 확대 이미지 로 구성됩니다. 또한 정적 이미지 위에 표시되는 강조 표시 탐색 영역과 정적 이미지 위에 표시되는 팁 메시지로 구성됩니다.
보고 있는 이미지의 차원이 플라이아웃 확대/축소 보기의 차원과 일치하지 않으면 이미지 컨텐츠가 플라이아웃 확대/축소 보기의 사각형 표시 영역 내에 중심이 됩니다.
기본 보기의 CSS 속성
기본 보기의 모양은 다음 CSS 클래스 선택기로 제어됩니다.
.s7flyoutviewer .s7flyoutzoomview
CSS 속성 |
설명 |
---|---|
배경색 |
기본 보기의 배경색입니다. |
예 - 기본 보기를 투명하게 만들려면:
.s7flyoutviewer .s7flyoutzoomview {
background-color: transparent;
}
플라이아웃 보기의 CSS 속성
플라이아웃 보기의 모양은 다음 CSS 클래스 선택기로 제어됩니다.
.s7flyoutviewer .s7flyoutzoomview .s7flyoutzoom
CSS 속성 |
설명 |
---|---|
왼쪽 |
기본 보기의 왼쪽 위 모서리에 상대적인 플라이아웃 보기의 수평 위치입니다. |
최상위 |
기본 보기의 왼쪽 위 모서리에 상대적인 플라이아웃 보기의 세로 위치입니다. |
width |
플라이아웃 보기의 폭입니다. |
height |
플라이아웃 보기의 높이입니다. |
경계 |
플라이아웃 보기의 테두리입니다. |
예 - 플라이아웃 보기를 600 x 400픽셀로 설정하려면 이전 예제에 표시된 512 x 288 기본 보기의 오른쪽에 100픽셀 오프셋를 사용하여 다음을 수행하십시오.
.s7flyoutviewer .s7flyoutzoomview .s7flyoutzoom {
left: 612px;
top: 0px;
width: 600px;
height: 400px;
}
기본 보기에서 강조 표시의 CSS 속성
기본 보기에서 강조 표시의 모양은 다음 CSS 클래스 선택기로 제어됩니다.
.s7flyoutviewer .s7flyoutzoomview .s7highlight
CSS를 사용하여 배경, 테두리, 투명도 및 유사한 속성을 제어할 수 있습니다. 그러나 강조 표시된 DOM 요소의 크기와 위치는 뷰어 로직에 의해 관리됩니다. CSS를 통해 재정의하는 것은 지원되지 않습니다.
CSS 속성 |
설명 |
---|---|
배경색 |
강조 표시의 색입니다. |
불투명도 |
불투명도를 강조 표시합니다. Internet Explorer 8의 경우 filter:alpha(불투명도-..); |
경계 |
테두리가 강조 표시됩니다. |
예 - 40% 투명도와 픽셀 빨간색 테두리가 있는 녹색 강조 표시를 설정하려면 다음을 수행합니다.
.s7flyoutviewer .s7flyoutzoomview .s7highlight {
background-color: green;
opacity: 0.4;
filter: alpha(opacity = 40);
border: 1px solid red;
}
커서의 CSS 속성
When highlightmode
매개 변수가 cursor
를 선택하면 기본 보기에서 강조 표시가 고정 크기의 커서 아트워크로 대체되며 CSS 클래스 선택기로 제어됩니다.
.s7flyoutviewer .s7flyoutzoomview
.s7cursor
CSS를 사용하여 배경 이미지와 크기를 제어할 수 있습니다.
적용 가능한 CSS 속성은 다음과 같습니다.
CSS 속성 |
설명 |
---|---|
배경 이미지 |
커서 아트웍입니다. |
너비 |
커서 너비. |
높이 |
커서 높이입니다. |
커서가 input
속성 선택기: 다양한 장치에 대해 서로 다른 커서 아트워크와 크기를 적용하는 데 사용할 수 있습니다. 특히, input="mouse"
는 데스크탑 시스템에 해당하며 input="touch"
는 터치 장치에 해당합니다.
오버레이의 CSS 속성
이 overlay
매개 변수가 1
에서는 강조 표시 프레임 주위의 영역 또는 커서 이미지는 CSS 클래스 선택기로 제어됩니다.
.s7flyoutviewer .s7flyoutzoomview
.s7overlay
CSS 속성 |
설명 |
---|---|
배경색 |
오버레이 색상. |
불투명도 |
오버레이 불투명도. |
팁 메시지의 CSS 속성
팁 메시지의 모양은 다음 CSS 클래스 선택기로 제어됩니다.
.s7flyoutviewer .s7flyoutzoomview .s7tip
CSS를 통해 글꼴 스타일, 크기, 모양 및 세로 오프셋을 구성할 수 있습니다. 그러나 가로 맞춤은 뷰어 논리에 의해 관리됩니다. 를 사용하여 CSS를 통해 재정의 left
또는 right
속성은 지원되지 않습니다.
CSS 속성 |
설명 |
---|---|
하단 |
기본 뷰의 하단에서 오프셋합니다. |
color |
텍스트 색상. |
font-family |
글꼴 이름. |
font-size |
글꼴 크기입니다. |
패딩 |
메시지 텍스트 주위에 패딩합니다. |
배경색 |
메시지 텍스트의 배경색 채우기 색입니다. |
테두리 반경 |
메시지 텍스트의 배경 테두리 반경. |
불투명도 |
메시지 텍스트의 배경 불투명도입니다. Internet Explorer 8의 경우 filter:alpha(불투명도-..) ) |
팁 메시지는 현지화할 수 있습니다. 자세한 내용은 사용자 인터페이스 요소의 로컬라이제이션 추가 정보.
예 - 흰색 Arial® 12px 글꼴로 반투명 팁 메시지를 설정하고 기본 보기 아래쪽에서 50픽셀 오프셋하고 패딩과 반올림된 테두리를 설정하려면 다음을 수행합니다.
.s7flyoutviewer .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);
}