[CSS3강좌] 32강 Background-clip과 mask효과

 

 

 

 

 

 

 

1. background-clip 속성

- background-clip속성은 요소 내에서 background관련(배경)이 확장되는 정도를 지정합니다.

 

 

 

1) 속성 값  정리

속성값	설명
border-box	기본값, 테두리(border)까지 배경색 혹은 배경이미지가 지정됨
padding-box	패딩영역까지 배경색 혹은 배경이미지가 지정됨
content-box	요소까지만 배경색 혹은 배경이미지가 지정됨

 

 

 

- 첫 번째 박스는 기본값인 border-box여서 테두리까지 배경색이 지정됩니다.

- 두번째 박스는 padding-box여서 패딩까지만 배경색이 지정되고 테두리 파트는 빠집니다.

- 세번째 박스는 content-box여서 콘텐츠까지만 배경색이 지정되고 패딩과 테두리 파트는 빠집니다.

- 그리고 마진에는 배경 관련은 들어갈 수 없습니다. 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

2) 텍스트에 배경이미지 넣기

- background-clip을 이용하면 텍스트에 배경 이미지를 처리할 수 있습니다.

 

 

## 문법

선택자{ background-clip: text; }

 

 

## 배경이미지 : 출처 - pixabay.com/photos/bokeh-abstract-background-blur-21951/

 

 

## 코드

 

- .box01에 영역과 글자 설정을 했습니다. 글자가 굵어야 잘 보이므로 굵게 처리해주세요.

- [color: transparent;] 글자색을 투명하게 처리합니다. 

- background-clip에 text라는 값을 넣었습니다. 현재는 웹 표준은 아닙니다. 

- 하지만 브라우저들에서는 인식이 됩니다.

- .box01에 마우스를 올리면 배경 이미지 위치를 바뀌게 설정했습니다.

- 마우스 올리면 배경 이미지의 위치가 변하는 것 보이시죠? 

 

 

## 브라우저 지원

Chrome	Safari	Firefox	Opera	IE & Edge
1+	3+	4+	10.5+	9+

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

2. mask-image 속성

- mask관련 속성은 요소를 적용된 부분만큼 숨기도록 지정합니다.

 

 

1) mask관련 속성

속성명	설명
mask-image	요소를 url에 지정된 이미지 만큼만 보이게 처리하는 속성
mask-size	background-size처럼 보일 요소의 크기를 지정하는 속성
mask-repeat	background-repeat처럼 마스크이미지를 반복할지 지정하는 속성
mask-position	background-position처럼 마스크에 보일 요소위치를 지정하는 속성

 

 

 

 

 

 

 

 

 

 

2) mask-image 속성예제

- 요소를 마스크 이미지에 넣는 속성입니다.

- 요소는 잘 처리되도록 이미지로 설정하겠습니다.

 

 

## 이미지 출처

- 하트 이미지 : icon-icons.com/icon/heart-love/61506

 

- 고양이 이미지 : pixabay.com/photos/cat-pet-sleep-domestic-cat-animal-4189697/

 

 

## 코드

 

- HTML에는 고양이 이미지를 첨부하였습니다.

- CSS에 mask-image로 하트 이미지를 첨부하였습니다. 

- 하트 이미지의 사이즈를 지정하고 크기가 좀 작아서 반복되기 때문에 마스크를 반복하지 말라고 no-repeat를 설정했습니다.

- 현재는 -webkit-로 벤더 프리픽스를 붙여야 사용 가능합니다.