이번 팁에서는 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 : 반복 안함
투명한 그림 예시
728x90
'Tips, Tricks > HTML, CSS' 카테고리의 다른 글
div에 스크롤바(Scroll Bar) 넣기 (0) | 2020.05.07 |
---|