CSS를 사용하여 이미지 단추 만들기
필요한 사항
• ThingWorx Studio 액세스
• 이미지 파일
단계
1. ThingWorx Studio를 열고 새 모바일, 2D 프로젝트를 만듭니다.
2. 단추 위젯을 캔버스로 드래그 앤 드롭합니다. 세부 정보 창에서 텍스트 필드를 지웁니다.
3. 프로젝트 창에서
리소스 옆의
아이콘을 클릭하여 이미지 파일을 경험에 추가합니다. 본 예시를 위해 재생 이미지를 사용하겠습니다.
4. 프로젝트 창에서 스타일 아래의 응용 프로그램을 클릭합니다.
응용 프로그램 스타일 편집기가 나타납니다. 여기서 CSS 클래스를 정의합니다.
5. 편집기에 다음을 입력합니다.
.image-button, .image-button.activated {
background: rgba(0,0,0,0.0);
border-style: none;
background-repeat: no-repeat;
background-position: center;
}
.image-button.activated {
-webkit-filter: opacity(30%) drop-shadow(1px 1px 0px grey);
}
.image, .image.activated {
background-image: url(#{$resources}/Uploaded/play.png);
}
| play.png를 사용자의 이미지 파일 이름으로 대체합니다. |
6. CSS 클래스를 정의했으면 저장을 클릭합니다. 저장이 완료되면 보기 아래의 홈을 클릭하여 캔버스로 돌아갑니다.
7. 캔버스에서 단추를 선택합니다. 세부 정보 창에서 클래스 필드에 다음을 입력합니다.
image-button image
이렇게 하면 이미지 단추 및 이미지 클래스가 단추에 적용됩니다.
상위 주제
