Browse DevX
Sign up for e-mail newsletters from DevX


Optimizing Design: Transparency

Transparency allows the background of the page to show through portions of the graphics file. You can mimic the effect when you create your graphic.




Building the Right Environment to Support AI, Machine Learning and Deep Learning

eb graphics files are rectangular due to their pixel structure and file formats ... yet we often see non-rectangular graphics on Web pages. There are two ways to make a graphic appear to have freeform shapes.

The simplest method to give the effect of transparency is to set a color for the parts of the graphic you want perceived as transparent to match the background color of the Web page. You aren't really making the image transparent, but you'll have the effect when you use it on the page. If you are using a JPEG image this is the only way you can create the effect of transparency.

For example, if you have green triangle and you want it to appear to be free-floating on a yellow page, you would fill the rest of the rectangular file containing the triangle with yellow. When this graphic is place on the page with the yellow background the rectangle will not appear:

The drawback to this, of course, is if you change the color of your page's background you'll suddenly have your image appearing in a box of the old page color! But if you know the color is fixed and you want a quick and simple solution, this can do the trick.

For a quick solution or for JPEG files, emulate the effect of transparency by creating the graphic with a background the same color as your page.

Comment and Contribute






(Maximum characters: 1200). You have 1200 characters left.



Thanks for your registration, follow us on our social networks to keep up-to-date