2017-04-04 1 views
0

의 페이지에 배경 이미지를 넣으려고합니다.ionic 2, 배경 이미지의 내용이 모든 페이지를 커버하지 못함 내 이오니아 2 앱에서

보기에는 슬라이드가 포함되어 있지만 슬라이드 뒤에서 배경을 고정하고 싶습니다.

정상적으로 보이지 않는 검은 선이 배경을 제외하고는 거의 효과가 있습니다.

page-onboarding { 

    .onboardingcontent, .onboardingcontent.content-md { 
     // background-color: black; 
     background-color: black !important; 
     color: white; 
    } 
.onboardingcontent::after { 
     content:""; 
     top: 0; 
     left: 0; 
     bottom: 0; 
     right: 0; 
     position: absolute; 
     background-image: url(../img/LouisRomainSpeed.jpg); 
     background-repeat: no-repeat; 
     background-size: cover; 
     background-position: center; 
     opacity: 0.3; 
     // z-index: 1; 
    } 

enter image description here

+0

아마도 '패딩'이나'm '.content-md' 또는'.onboardingcontent :: after' 클래스에서 argin을 사용합니다. –

+0

실제로, 패딩과 마진은 모두 0으로 설정됩니다 ... – Louis

답변

0

이 같은 .scroll-내용을 위해 배경 이미지를 추가합니다 :

.scroll-content { 
    content:""; 
    top: 0; 
    left: 0; 
    bottom: 0; 
    right: 0; 
    position: absolute; 
    background-image: url(../img/LouisRomainSpeed.jpg); 
    background-repeat: no-repeat; 
    background-size: cover; 
    background-position: center; 
    opacity: 0.3; 
} 

당신은 scroll-content에서 사용할 수 있습니다 내 page.scss 파일에서

또는 fixed-content

+0

생각보다 이미지 아래에 검정색 레이어가 필요합니다. 이미지에 불투명도가 있습니다. 0.3 – Louis

+0

당신은 이온 - 내용에 배경색을 추가 할 수 있습니다. 스크롤 클래스는 그 위에 생성됩니다. –

+0

괜찮습니다.하지만 scoll-content에 불투명도를 넣으면 모든 내용이 불투명합니다. – Louis