이온 3 : 그라디언트 배경

Question

$background-color을 variables.scss에 설정하여 이오니아 앱의 배경색을 변경하기는 쉽지만 그래디언트 또는 이미지는 사용할 수 없습니다. 나는 이것에 대한 공식 문서 나 유용한 질문과 대답을 찾을 수 없다는 것에 놀랐다.

$background-color을 색으로 설정하면 현재 배경색에 따라 색을 계산하는 많은 이온 구성 요소 중 하나에서 Sass 오류가 발생합니다. 그래서 여기

Answer 1

내가 src/theme/variables.scss에서 처음 일을 결국 무엇을 :

$app-background: linear-gradient(to bottom, color($colors, light) 0%, color($colors, dark) 100%); 
$background-color: transparent; 
$toolbar-background: transparent; 

일반적인 배경 및 도구 모음 아래에 그라데이션을 보여 투명해야한다. 우리는 src/app/app.scss에 그라데이션을 적용

ion-content { 
    background: $app-background; 
} 

당신은 ion-content은 머리글/메뉴 바 및 바닥 글/탭 사이의 공간을 차지하지만, 실제로 전체 화면을 채우기 위해 이온에 의해 스타일 있다고 생각 할 수있다. 그라디언트를 위에서 아래로 가져 왔습니다. 성공.