CSS | backdrop-filter
2024. 4. 25. 15:40ㆍStudy/Publishing
backdrop-filter
해당 요소에 블러 처리되는 `filter: blur()`와 달리 요소의 배경 영역에 블러 처리가 된다.
`backdrop-filter` CSS 속성을 사용 하면 요소 뒤 배경 영역에 흐림이나 색상 변경과 같은 그래픽 효과를 적용할 수 있다. 이는 요소 뒤에 있는 모든 것에 적용되므로 효과를 보려면 요소나 배경이 투명하거나 부분적으로 투명해야 한다.
사파리 에서는 vender prefix와 함께 사용해야 한다. `-webkit-backdrop-filter`
See the Pen [css]backdrop-filter3 by miok song (@miok-song) on CodePen.
Syntax
/* Keyword value */
backdrop-filter: none;
/* URL to SVG filter */
backdrop-filter: url(commonfilters.svg#filter);
/* <filter-function> values */
backdrop-filter: blur(2px);
backdrop-filter: brightness(60%);
backdrop-filter: contrast(40%);
backdrop-filter: drop-shadow(4px 4px 10px blue);
backdrop-filter: grayscale(30%);
backdrop-filter: hue-rotate(120deg);
backdrop-filter: invert(70%);
backdrop-filter: opacity(20%);
backdrop-filter: sepia(90%);
backdrop-filter: saturate(80%);
/* Multiple filters */
backdrop-filter: url(filters.svg#filter) blur(4px) saturate(150%);
/* Global values */
backdrop-filter: inherit;
backdrop-filter: initial;
backdrop-filter: revert;
backdrop-filter: revert-layer;
backdrop-filter: unset;
https://shynaunum.tistory.com/38
[CSS] backdrop-filter로 배경에 효과주기
라이브는 물론 재탕, 삼탕으로 예능이나 드라마를 볼 때 즐겨 이용하는 티빙. 그동안은 별생각 없이 이용하고는 했었는데 어느 날 문득 스크롤을 내리다 상단바가 눈에 띄었다. 상단에 고정된 gn
shynaunum.tistory.com
https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter
backdrop-filter - CSS: Cascading Style Sheets | MDN
The backdrop-filter CSS property lets you apply graphical effects such as blurring or color shifting to the area behind an element. Because it applies to everything behind the element, to see the effect the element or its background needs to be transparent
developer.mozilla.org
https://css-tricks.com/almanac/properties/b/backdrop-filter/
backdrop-filter | CSS-Tricks
The backdrop-filter property in CSS is used to apply filter effects (grayscale, contrast, blur, etc) to the background/backdrop of an element. The
css-tricks.com
https://lemongreen.tistory.com/11
backdrop-filter가 사파리에서 작동 안해요!!
정답: -webkit-backdrop-filter를 추가로 사용하기. 사파리에서는 vendor prefix와 함께 사용해야한다.
lemongreen.tistory.com
'Study > Publishing' 카테고리의 다른 글
| SCSS (0) | 2024.05.16 |
|---|---|
| Media Queries Breakpoints For Responsive Design In 2023 (0) | 2023.11.01 |
| iPhone overscroll, user-scale 제어 (0) | 2023.10.04 |
| 사파리 overflow:hidden + border-radius 관련 이슈 해결법 (0) | 2023.09.08 |
| input type=password ios/aos 폰트 크로스브라우징 이슈 (0) | 2023.04.06 |
