css-filters

Html2Canvas Not working for webkit-filter - Suggestions for similar

由 妖精的绣舞 提交于 2019-12-09 07:33:28
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

CSS backdrop-filter does not update when content behind it moves

由 ⅰ亾dé卋堺 提交于 2019-12-09 03:42:12
问题 I should think that as the content behind a backdropped element moves, the element's background color adapts to appear as if the content was shining through it. In this example, it's not the case: What's wrong? Tested this on Safari 12.0.3, macOS Mojave 10.14.3. .container { width: 100%; height: 150px; overflow-y: scroll; } .block { height: 50px; margin: 10px; } .block:nth-child(1) { margin-top: 30px; background-color: red; } .block:nth-child(2) { background-color: green; } .block:nth-child(3

Emulate Photoshop's “Color Overlay” using CSS filters?

由 …衆ロ難τιáo~ 提交于 2019-12-08 15:40:39
问题 I have an icon which I'd like to change the color of, using CSS. It is in a data-uri'd optimized SVG inlined in the CSS. Normally, this wasn't possible. That's why icon fonts were invented; their main advantage over SVG is being able to recieve color and text-shadow rules from CSS. Well, CSS filters are now capable of doing both things to arbitrary images, and they now work in all Blink, Webkit and Gecko browsers, and can be expected for future IE/Spartan. A text-shadow replacement is easy;

Blur part of an image with CSS

由 僤鯓⒐⒋嵵緔 提交于 2019-12-07 07:39:54
问题 I have a problem with an image. I tried to blur a part of an image, but my solution deosn't work. Please, take a look at this code: HTML file <div id="image"> <div class="blur"></div> </div> CSS file #image { width: 940px; height: 360px; background-image: url('../img/photo.png'); } #image .blur { background-image: url('../img/photo.png'); background-position: center right; -webkit-filter: blur(3px); -moz-filter: blur(3px); -o-filter: blur(3px); -ms-filter: blur(3px); filter: blur(3px); filter

Change color of image via CSS

由 ╄→гoц情女王★ 提交于 2019-12-06 15:23:07
问题 Hello I am trying to change image to red color using css and after trying so hard I decided to post this question and I hope that I can learn through the answer this is what I have so far https://jsfiddle.net/md1/ img { -webkit-filter: invert(90%); filter: invert(90%); } 回答1: you need to combine two filters saturate and hue , below is a possible combination to get a "red" (if you use a color picker it will generate the default web "red" - #FF0000 or just #F00 , because you can choose your red

CSS: Blur and invert colors for entire page

由 给你一囗甜甜゛ 提交于 2019-12-06 01:22:58
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); } You could use svg 's foreignObject element to import the entire body 's content into an svg element and then apply the filter s on the foreignObject which will apply the filter s on the entire body . Browser

CSS Filter invert rule breaking fixed position on Chrome 68 [duplicate]

由 蓝咒 提交于 2019-12-04 02:47:18
问题 This question already has an answer here : CSS-Filter on parent breaks child positioning (1 answer) Closed last year . I'm on Chrome 68. Whenever I have filter: invert(xxx); on the <body> , anything positioned as fixed doesn't stick to the screen, it scrolls with everything. Demo with filter: invert(xxx); body{ height: 8000px; filter: invert(0.85); } div{ position: fixed; top: 0; left: 0; height: 100px; width: 100px; border: 1px solid black; } <div></div> Demo without filter: invert(xxx);

Gooey css effects with contrast parent

由 ℡╲_俬逩灬. 提交于 2019-12-03 08:35:31
问题 I'm trying to create gooey effect with CSS only (without svg) . Everything goes right but my parent container has a contrast filter and I can't use colors on my child elements (the contrast filter changes the colors). Does someone know of a basic way to make this effect with only CSS or reverse the contrast filter to get my right colors on the child elements? My code: body{ background: #fff; } .blobs { position:absolute; top:0; left:0; bottom:0; right:0; background: #fff; width:400px; height

Gooey css effects with contrast parent

由 爷，独闯天下 提交于 2019-12-03 00:09:11
I'm trying to create gooey effect with CSS only (without svg) . Everything goes right but my parent container has a contrast filter and I can't use colors on my child elements (the contrast filter changes the colors). Does someone know of a basic way to make this effect with only CSS or reverse the contrast filter to get my right colors on the child elements? My code: body{ background: #fff; } .blobs { position:absolute; top:0; left:0; bottom:0; right:0; background: #fff; width:400px; height:200px; margin:auto; filter:contrast(20); -webkit-filter:contrast(20); } .blob { background:black; width

How to prevent image flash when transitioning with blur?

由 依然范特西╮ 提交于 2019-12-02 14:36:04
问题 How to prevent flash on end of transition on filter: blur effect? (I'm using chrome) Snippet below to show problem. $(window).on('load',function( event ){ setTimeout(function(){ $('.sec').addClass('active') },1000) }) .sec { margin: 0 auto; width: 700px; height: 500px; background-image: url(http://placekitten.com/700/500); background-size: cover; -webkit-filter: blur(20px); -moz-filter: blur(20px); -o-filter: blur(20px); -ms-filter: blur(20px); filter: blur(20px); } .sec.active { -webkit
订阅 css-filters