css-filters

问题 I have BODY { -webkit-filter: invert(100%); -moz-filter: invert(100%); -ms-filter: invert(100%); -o-filter: invert(100%); filter: invert(100%); } and .jpg { -webkit-filter: invert(0%) !important; -moz-filter: invert(0%) !important; -ms-filter: invert(0%) !important; -o-filter: invert(0%) !important; filter: invert(0%) !important; } This works in MIE. Chrome insists on inverting also the pictures with the jpg class. Any suggestions? 回答1: From Understanding CSS Filter Effects: When a browser

问题 I am trying to apply a blur effect for a layer behind my modal window and it works fine on webapp, iOS but it fails on Android. I know Android just started to support css filters with 4.2 I belive. .blurred { margin: -5px -10px; -webkit-filter: blur(2px); filter: blur(10px); -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease; } I tried using Chrome inspector to apply other filters and they worked (like grayscale), also

问题 Html2Canvas works perfectly to make div content download, but when the div contains css filters the html2Canvas not apply the filters in the generated image. https://github.com/niklasvh/html2canvas/issues/246 Would welcome suggestions for something similar to Html2Canvas to download (image) the contents of a div Thanks for any help 来源： https://stackoverflow.com/questions/34684048/html2canvas-not-working-for-webkit-filter-suggestions-for-similar

问题 When using both webkit filters "blur" and "invert", only blur works. And if "blur" is removed "invert" works. Also only Chrome and Opera are responding to the code. Is there a way to make this work for recent IE and Firefox versions? body { -webkit-filter: invert(100%); -webkit-filter: blur(5px); -moz-filter: blur(5px); -o-filter: blur(5px); -ms-filter: blur(5px); filter: blur(5px); } 回答1: You could use svg 's foreignObject element to import the entire body 's content into an svg element and

问题 I have a colored png image with transparency. I would like to use css filter to make the whole image white but leave the transparency as it is. Is that possible in CSS? 回答1: You can use filter: brightness(0) invert(1); html { background: red; } p { float: left; max-width: 50%; text-align: center; } img { display: block; max-width: 100%; } .filter { -webkit-filter: brightness(0) invert(1); filter: brightness(0) invert(1); } <p> Original: <img src="http://i.stack.imgur.com/jO8jP.gif" /> </p> <p

问题 This question already has answers here : Drop shadow for PNG image in CSS (15 answers) Closed 3 years ago . Is it possible to do a drop shadow on the content of a PNG? Not a square , but an object drop shadow that acts on the non-transparent content of the PNG. 回答1: It's definitely possible. Using filters, sample: img { -webkit-filter: drop-shadow(5px 5px 5px #222); filter: drop-shadow(5px 5px 5px #222); } 回答2: It's not possible to do that in CSS. However, it's quite possible to do it through

问题 I can see it working on Microsoft's website: https://developer.microsoft.com/en-us/microsoft-edge/testdrive/demos/css3filters/ But on the website I am currently working on, it only works some times. For example, when I remove max-width on the img tag, the grayscale suddenly works, but then when I hover it, it stops working. The filter was originally on an img tag, but I also tried on a div with the same result. I know it might be too specific a case, but I can't seem to find anything related

问题 Is there a way to disable the box shadow for the part where the pseudo-element arrow resides? Current: or without the negative z-index on the pseudo-element: Desired result : #element { position: relative; width: 100px; height: 100px; background-color: blue; box-shadow: 5px 5px 5px #222; } #element::after { content: ""; width: 25px; height: 25px; background-color: blue; top: 40px; left: 88px; transform: rotate(45deg); position: absolute; z-index: -1; -webkit-filter: drop-shadow(5px 5px 5px

问题 I have a lot of css filter classes that can be applied to an image using the the CSS filter. My goal is to convert the image with the filter applied to dataURL. To do so, I'm placing the image into a canvas then saving the image after I applied the filter. Here's an example const img = this.img // my <img /> const canvas = document.createElement('canvas') const context = canvas.getContext('2d') context.filter = 'grayscale(2)' context.drawImage(img, 0, 0) const finalImg = canvas.toDataURL()

问题 This recent question touched on how filter and viewBox attributes on a <svg> element interact. At first glance, Paul LeBeau's answer seemed to be evident: first the filter is applied, then the implied transformation from the viewBox is applied to the result. But searching through the spec didn't turn up a clear-cut answer after all, and browser implementations widely vary. I have designed a test case that also examines an additional transform attribute on the same element: <svg filter="url(