배경만 투명한 그림 추가하기(Transparent Background with Image)

이번 팁에서는 div의 가운데에 투명한 배경그림을 넣는 방법을 설명합니다.

 

배경만 투명한 그림 넣기

보통 투명한 배경을 사용하려 할 때 div의 opacity를 사용합니다. 하지만 이렇게 설정하면 내용까지 투명해집니다. 아래의 예시는 투명한 배경을 사용하면서 내용은 투명해지지 않게 처리하는 방법입니다.

<div id="wrapper">
</div>

<style scoped>
  #wrapper {
    position: relative;                     // 좌표계 : 상대좌표
    height: 100%;                           // 높이
    width: 100%                             // 너비
  }
  #wrapper:after {
    content : "";                           // 내용 : 없음
    display: block;                         // 보이기여부 : 보임
    position: absolute;                     // 좌표계 : 절대좌표
    top: 0;                                 // Y좌표 : 0
    left: 0;                                // X좌표 : 0
    height: 100%;                           // 높이
    width: 100%;                            // 너비
    background-image: url('~@/assets/apps.png'); 	// 배경이미지
    background-repeat: no-repeat;                   // 배경이미지 반복 여부 : 사용안함
    background-position: center;                    // 배경이미지 위치
    opacity:0.25!important;                         // 투명도
    filter:alpha(opacity=25);                       // 투명도(IE)
    z-index: -1;                            // 레이어 순서: 사용안함
  }
 </style>

 

background-position 속성

• left top : 왼쪽 상단
• left center : 왼쪽 중앙
• left bottom : 왼쪽 하단
• right top : 오른쪽 상단
• right center : 오른쪽 중앙
• right bottom : 오른쪽 하단
• center top : 중앙 상단
• center center : 중앙 중앙
• center bottom : 중앙 하단
• x% y%: x좌표 y좌표(단위는 cm, px, in, pt, em 사용가능)

 

background-repeat 속성

• repeat : 반복(기본값)
• repeat-x : 가로로 반복
• repeat-y : 세로로 반복
• no-repeat : 반복 안함

 

투명한 그림 예시

투명한 배경이미지