css-filters

问题 Please refer to the following snippet. I'm wondering how to make the backdrop-filter apply to the drop down menu ul ? nav { position: fixed; top: 0; left: 0; right: 0; height: 50px; background: hsla(0, 0%, 100%, 80%); border-bottom: 1px solid hsla(0, 0%, 0%, 10%); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); z-index: 1; } nav ul { display: flex; align-items: center; margin: 0; padding: 0; list-style: none; } nav li { position: relative; margin: 0 20px; height: 50px; line

问题 document.querySelector( 'style' ).innerHTML += ` div { width: 40rem; height: 1rem; background-color: #444; } .earth_orbit, .moon { width: 15rem; margin-left: 100%; background-color: #222;; } .earth_orbit::before { width: 5rem; height: 5rem; background-color: #08f; } .moon { width: 2.5rem; height: 2.5rem; background-color: #ddd; } section { right: 5%; width: 37.5%; height: 50%; font-size: 5rem; font-weight: bold; text-align: center; backdrop-filter: blur( 2rem ); -webkit-backdrop-filter: blur(

问题 For a site I am currently working on, I need a header that has a blurred background. I used the css ::before to do this, but I need to retain the sharp edges. Here is what I currently get: (You might need to open it in full-screen to see the blurred edge.) The code of what I have right now is: (View on CodePen) * { padding: 0; margin: 0; box-sizing: border-box; } html, body { height: 100%; } header { width: 100%; min-height: 60%; padding: 50px 100px; text-align: center; color: white; } header

问题 How do I take a image with just white and transparent pixels (example) and recolor to, say, red or orange, using only CSS? Question below was asked previously - Change color of PNG image via CSS? The answer says to use filters, but does not indicate what combination of filters would make it work. Are there any filter combinations that would allow me to change a white-on-transparent image to red? To clarify: I would like to recolor the white portion of the image , not color the background. For

问题 I have image with different colors. In adobe photoshop my image filtered with smart filter which add hue, saturation, brightness to image. So I need to change all colors on image to hue of blue. But in css hue-rotate() function rotate all colors, but i need to set one color and change some saturation and brightness.This is source image: I need to get this: How i can set one hue color on image with css filter? 回答1: You can consider mix-blend-mode property. With pseudo elements and with

问题 I have a div.outer and inside a div.inner , both with position: absolute; and backdrop-filter: blur(8px); . https://jsbin.com/nihakiqocu/1/edit?html,css,output Safari (left) gives the desired result – both divs blur what's behind them. Chrome (right), however, only applies the blur of div.outer : I have a solution: adding another div inside div.outer and moving backdrop-filter: blur(8px); to that new div. However, I would appreciate a solution that doesn't require changing the DOM from the

问题 Looking to adjust the tonal values of the green color channel in an image. Specifically, changing the green values (only) to really dark green or black. Any ideas using svg filters? 回答1: You want the SVG feColorMatrix with type="matrix" . Then discard the Red/Blue channels, and multiply the green-to-green to be darker. Specifically, to turn an RGBA image to use just the green channel and darken it by half (and have full alpha no matter what the original alpha was), you want these matrix

来源： https://stackoverflow.com/questions/60609181/normalize-css-filters-with-gd-lib-filters

来源： https://stackoverflow.com/questions/38196816/apply-and-save-image-effects-on-canvas-javascript

来源： https://stackoverflow.com/questions/38196816/apply-and-save-image-effects-on-canvas-javascript