Hi there,
I am using Adobe XD to design my next project and want to deliver the interactive prototype using Axure.
since Axure doesn’t support background blur effect natively. I have to use Javascript to do that.
Sadly the following code doesn’t work. Can someone help me?
javascript: $('[data-label="HeroBlurBG"]').css({'backdrop-filter': 'blur(30px)','backdrop-filter': 'brightness(30%)', 'backdrop-filter': 'opacity(40%)'})
You’ll have to include the background color as part of your injection, even if you just set it to “transparent”.
For some reason, setting multiple properties with the same name using the JQuery css() method doesn’t seem to work (at least in Axure); it only sets the last one listed. I did find an example of someone using arrays to set styles using JQuery (https://stackoverflow.com/questions/29999097/jquery-adding-multiple-css-properties-with-same-name-doesnt-work).
Inject_CSS_Array.rp (195.6 KB)