backdrop-filter

2021.12.10

use client /components/post/reExport > <div className= > Hello </div> </div> <div className= > <div>{ }</div> <div style={{ marginLeft: }}> <div>backdrop-filter:</div> <div style={{ marginLeft: }}> <div> blur( <input type= onChange={e => SETblurState(e.target.value) } value={blurState} /> px) </div> <div> brightness( <input type= onChange={e => SETbrightnessState(e.target.value) } value={brightnessState} /> %) </div> <div> contrast( <input type= onChange={e => SETcontrastState(e.target.value) } value={contrastState} /> %) </div> </div> </div> <div>{ }</div> </div> <style jsx>{ ] { margin-right: 10px; cursor: pointer; } .css input[type= ], .css input[type= ] { border: 0px solid grey; box-shadow: inset 0px 0px 2px #000000; outline: none; max-width: 50px; margin: 0px 5px; background-color: white; padding: 5px; border-radius: 4px; } backdrop-filter 2021.12.10 ], desc: , body: ( <> <p><Code>backdrop-filter</Code> CSS property applies effects to the area behind an element.</p> <p>That /* 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: unset;