[IONIC]background image blur

개발을 할때 깔끔하고 분위기있는 배경화면은 앱을 더욱 고급스럽게 만들어 준다. 

하지만 앱에서 화려한 백그라운 이미지는 컨텐츠에 집중도를 떨어뜨리기 때문에 블러를 줘서 분위기만 담아주는 정도가 적당하다고 하겠다. 

우선 로그인 폼을 기준으로 예제코드를 올려보겠다(login.html)

	
		
			Login Form
		
		
			
				
					
				
				
					
				
				Forgot your login detail? Get help signing in
				
				
OR
				
				
		
	
	

// Styles for all of the user pages:
// Login, Signup, Support

page-user {
  .logo {
    padding: 20px 0;
    min-height: 200px;
    text-align: center;

    img {
      max-width: 150px;
    }
  }

  .list {
    margin-bottom: 0;
  }

  .background{
    background-image: url('../../assets/img/bg.jpg');

    width: 100vw;
    height: 100vh;
    z-index: 10;
  
    -webkit-filter: blur(3px);
    -moz-filter: blur(3px);
    -o-filter: blur(3px);
    -ms-filter: blur(3px);
    filter: blur(3px);
  }

  .scroll-content {
    align-content: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    z-index: 50;
  }

  ion-card.card {
    box-shadow: none;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 5px;
  }

  a, p,
  ion-card-header.card-header{
    color:#fff!important;
  }

  .list > .item-block:first-child {
    border: medium none;
  }

  .item { 
    margin-bottom: 10px;
    background: rgba(255, 255, 255, 0.5);
    border: medium none;

    .text-input, {
      color: #fff;
    }

    input::-moz-placeholder{
      color: #fff!important;
    }

    input:-moz-placeholder {
      color: #fff!important;
    }

    *:-moz-placeholder{
      color: #fff!important;
    }

    *:-ms-input-placeholder{
      color: #fff!important;
    }

    *::-webkit-input-placeholder{
      color: #fff!important;
    }
  }
  .icon {
    padding-right: 10px;
  }

  .bottom {
    position: absolute;
    bottom: 0;
  }
}

위와 같이 설정해 주면 아래와 같이 분위기(?)있는 로그인 화면을 만들수 있겠다.. ㅋㅋㅋㅋ 근데 분위기 어디갔니... 내손만 지나치면 어디로 사라지는 거니.... 

내 머리속에선 아래의 것이 나올것 같았는데... .

실상은...  ㅠㅠ 눈을 키워야 겠다... 

(참고 링크: https://www.youtube.com/watch?v=Tus5gRq6Nio&t=62s    로그인 페이지 레이아웃 가져온곳)