CSS 이미지 반사
이 장에서는 이미지를 반사하는 방법을 배웁니다.
CSS 이미지 반사
속성 은 box-reflect이미지 반사를 만드는 데 사용됩니다.
box-reflect속성 값은 below, above,
left또는 right입니다.
브라우저 지원
표의 숫자는 속성을 완전히 지원하는 첫 번째 브라우저 버전을 지정합니다.
-webkit- 뒤에 오는 숫자는 접두사와 함께 작동한 첫 번째 버전을 지정합니다.
| Property | |||||
|---|---|---|---|---|---|
| box-reflect | 4.0 -webkit- | 79.0 -webkit- | Not supported | 4.0 -webkit- | 15.0 -webkit- |
예
예시
여기서 우리는 이미지 아래에 반사를 원합니다.
img {
-webkit-box-reflect: below;
}
예시
여기서 우리는 이미지 오른쪽에 반사를 원합니다.
img {
-webkit-box-reflect: right;
}
CSS 반사 오프셋
이미지와 반사 사이의 간격을 지정하려면 간격의 크기를 box-reflect속성에 추가합니다.
예시
여기에서 20px 오프셋을 사용하여 이미지 아래에 반사를 원합니다.
img {
-webkit-box-reflect: below 20px;
}
그라디언트가 있는 CSS 리플렉션
반사에 페이드 아웃 효과를 만들 수도 있습니다.
예시
반사에 페이드 아웃 효과 만들기:
img {
-webkit-box-reflect: below 0px linear-gradient(to bottom, rgba(0,0,0,0.0),
rgba(0,0,0,0.4));
}