: Is there any way to save a Web page screenshot with a transparent background? I prototyped my web page directly in HTML/CSS, using custom fonts for header text. The font rendering however is

@Samaraweera207

Give this place a try. Also, make sure your background-color is set to transparent.
www.hiqpdf.com/demo/ConvertHtmlToImage.aspx

Vote Up Vote Down

@BetL875

Simple. Take a screen shot of your webpage, then use the background eraser tool in Photoshop to get rid of the background.
Easier still, would be re-creating your marquee text completely in Photoshop, minus the background and any other distractions, then using an <img> tag to place the PNG-24+transparency background (or PNG-32, as it's known in Fireworks), inside the <div> where your title would otherwise be.
You can also make a non-transparent version for older browsers (like IE6), which don't support transparent images.
If you know a little PHP, you can even set up a script to detect the user agent (browser), then use the appropriate image, transparent image, or, for modern browsers, lack of image, and instead, use of an actual font.

Vote Up Vote Down

@Lee3735518

No there isn't any way to save screen shot with a transparent background. you have to do all manual...

Vote Up Vote Down

@Sims5801359

I'd:


take a screenshot of the page as is
set the text to black and the background to white, take another screenshot
use the screenshot from (2) as an alpha transparency mask over the original screenshot from (1).


You should then have a colour screenshot with a transparent background. Sure you'll probably need to do a bit of extra manual masking as well to get perfect results, but it sounds like it should cover your need to extract images of the header text.

For more general use, you might be able to put together a more sophisticated stylesheet to give better results (ie replace images with solid fill).

Vote Up Vote Down