CSS의 background-clip 속성을 이용하면 박스 모델 안에서 배경 이미지를 어디까지 표시할지 결정할 수 있습니다.
background-clip: border-box | padding-box | content-box
예를 들어, 아래 소스에서 .bg1 스타일은 배경 이미지를 border-box까지 표시하죠
See the Pen bg-clip-1 by do.it.html5 (@kyrieko) on CodePen.
이 속성을 사용해서 텍스트 안에 배경 이미지를 넣을 수도 있습니다. 이 경우에는 background-clip 속성을 text로 지정하는데, -webkit- 접두어가 붙은 background-clip 속성도 함께 사용해야 합니다. 그리고 글자색은 trasparent로 사용합니다.
background-clip: text;
-webkit-background-clip: text;
color: transparent;
이 속성을 사용해 위 예제와 똑같은 글자에 배경 이미지를 넣어보겠습니다.
See the Pen bg-clip-2 by do.it.html5 (@kyrieko) on CodePen.
'css' 카테고리의 다른 글
좌우로 왔다갔다 하는 CSS 애니메이션 (0) | 2023.02.15 |
---|---|
박스 모델 테두리에 이미지 넣기 (0) | 2022.11.20 |
css 단위 - 길이 (0) | 2022.04.08 |
가상 요소 ::before, ::after (0) | 2022.03.07 |
링크해서 사용하는 아이콘, Font Awesome (0) | 2022.03.05 |