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 از این ویژگی پشتیبانی می کنند.