Exporting transparent background using Fireworks - graphics

I'm pretty new to Fireworks. I drew an orange rectangle and made it semi-transparent. My web page has a patterned background which I'd like to be able to see through my div, but I can't change the opacity of the div in CSS as the div contains other divs that also become transparent using this CSS when I don't want them to!
I've tried loads of things I found on Google but to no avail. Can anyone help?

If you want to know how to export the semi-transparent rectangle from Fireworks so it stays that way, just make sure your canvas color is set to none (the box with a red diagonal line through it) and then export it as a PNG-32.
I'm not sure I understood what you mean by DIVs becoming transparent when using CSS. Can you elaborate on that a bit?

Related

Is there a way to put a background inside SVG

I need to make an SVG that is to be used as a background-image with "cover", so the tile in the mosaic could be rescaled.
I'd like to have the icon at a fixed size and the posibility to always fill with a background color, because, to make matters more complicated, my image is going to be inside a container that is inside the tile
this is my example
my icon should go inside that red outlined box, fixed size and the background in gray
could i get that done?

How to transform a Grayscale background SVG, to white or black colors

I have Gray SVG icons next to each Menu item (inherited from another project) and displaied as background.
I need to show them black or white but I don't how to achieve this.
As backgrounds I can't use fill css property. I tried with filter:brightness(100) to make them white but I loose anti-aliasing (and analogue with filter:brightness(0) to make them black).
Mask has still serious compatibility issues (e.g. Firefox does not allow external svg).
I tried also to import them as data-uri with LESS feature, but it was unuseful, so.... any suggestion?

Changing only some path/group fills in a background image using svg-sprites

I'm using svg as a background image (logo) in a WP menu plugin and i want it to change a color (fill) when hovered. As it's a free version of the plugin i can't use image, object etc - i have to use my svg as a background image. I've to support IE (9+) so masks/filters are out of question and i'm pretty much left with svg-sprites. That's okey, i know how to do it (using use/xlink:href).
But now comes a tricky part. I want my svg to change only fills of some groups/paths while hovered leaving others untouched. I can only change colors of all paths/groups together in a background image with svg-sprites afaik. Is there a way to do it? Thank you in advance!

Is there a way I can modify my page background color to show as random shades with svg?

I have a black #000 page background on my web page.
Is there a way that I can change this with SVG to show a random effect of small #111 and #222 colored squares. I was told I could do this with SVG but I don't have any idea where to start. Even a really simple example would be a great help.
I'm looking for a solution for IE9+ browsers.
SVGs can be used as background images they same way that a PNG or JPG can. Create an SVG with any suitable editor - such as Inkscape - and include it the way you normally would.
background-image: url(../images/mybackground.svg);

How can I make website objects appear to fadeout as you scroll? (Transparent gradient)

I have a website with some text on the body and a fixed menu bar on top.
I want the text to 'fade-out' as you scroll, instead of disappearing behind other element.
My website's background is grey, so II made a gradient that goes from grey to transparent.
It works great, except that you can sort of tell that there's a grey band across the website.
Notice the band (starting right above the red arrow) on this screen I printed
Why does irt show an off color?
I know about PNG gamma correction, but this is not it, I have removed the gAMA part, I have also tried "fine-tuning" it, nothing will work. (I know I am doing this right because I tried it on a solid PNG, stripped the gamma data, and it perfectly matches the CSS background).
Any ideas on how I can achieve this?! (I can use any other method, doesn't need to be a PNG gradient, but I do need it to be a fade-out).
Make a gradient from opaque gray to transparent white.

Resources