ویژگی backdrop-filter در CSS

backdrop-filter Property

ویژگی backdrop-filter در CSS، امکان ایجاد افکت های گرافیکی مانند بلور و تغییر رنگ را در پس زمینه عنصر را میسر می کند. از آنجا که این ویژگی به تمام عناصری که در پشت عنصر قرار دارند نیز اعمال می شود، باید خود عنصر و یا پس زمینه آن تا حدودی شفاف (transparent) شوند.

نحوه نوشتار

backdrop-filter: none;

backdrop-filter: url(commonfilters.svg#filter);

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%);

مقادیر

none​

هیج فیلتری به پس زمینه اعمال نمی شود.

اعمال فیلتر با کلیدواژه

فیلتر توسط کلیدواژه و یا فیلتر SVG اعمال می شود.

در مثال زیر نحوه عملکرد این ویژگی را میبینیم:

html

<div class="container">
  <div class="box">
    <p>backdrop-filter: blur(10px)</p>
  </div>
</div>

css

html,
body {
   height: 100%;
   width: 100%;
}
body {
   background-image: url(http://my-project.ir/img/nature.jpg);
   background-position: center center;
   background-repeat: no-repeat;
   background-size: cover;
}
.container {
   align-items: center;
   display: flex;
   justify-content: center;
   height: 100%;
   width: 100%;
}
.box {
    background-color: rgba(255, 255, 255, 0.3);
    border-radius: 5px;
    font-family: sans-serif;
    text-align: center;
    line-height: 1; 
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);  
    max-width: 50%;
    max-height: 50%;
    padding: 20px 40px;
}
p {
    color: #ffffff;
    font: 700 23px "calibri";
}

مشاهده و ویرایش کد در حالت تمام صفحه

پشتیبانی مرورگرها
تمام مرورگرها بجز Internet Explorer، Firefox for Android و Samsung Internet از این ویژگی پشتیبانی می کنند.