the img I made is suposed to be transparent but when I upload it to my web page it has a dark blueish background, just don't understand why .. please help, how can I check if its fully transparent ?
what browser? transparency in gif is just a color that you set as transparent and the browser must interpret it as transparent. Some older browsers don't work with it. If it displays correctly in any modern browser such as chrome for example, then the transparency is correctly set in your gif.
You can try another different software to save the GIF or a different method of selecting transparency, for example, by mask instead of by color. Or try a PNG format instead.
Related
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);
I have some .bmp files that have some color (maybe black) that is supposed to show as transparent when the graphic is displayed on top a form, so the form color comes through the transparent areas. But by default, when I put these images in an Image View, the black/transparent areas show up as BLACK!
I'm thinking I need to either:
- alter how the NSImageView shows the image, so that a certain color is transparent, or
- modify the .bmp files somehow to make that color suitable for transparency in an NSImageView
But I don't know enough about graphics files, transparency(alpha), NSImageView, nor the image editing tools. I'm trying to use Gimp, but...not sure what I'm doing yet. It seems like there is already a color that should be transparent in the current .bmp file.
I'm sure its something simple for setting NSImageView, or editing my file, or perhaps making a mask for the image, but I don't know how yet. I've looked at various filters in IB for NSImageView, but have not found where to set the transparent color, nor how to grab that color from the image file to make sure I use the correct value.
Thanks in advance for any assistance. (I tried to post some images, but because I'm new, I could not.)
Beau
I'm not a Cocoa developer, but in Gimp try adding an alpha channel to your image (a layer mask, perhaps) then saving as a 32-bit PNG image (with an alpha channel), then load that PNG directly into your NSImageView. If you want to make the black pixels transparent in Gimp use the magic-wand tool to select them (use magic-wand with 0 tolerance) and just delete the contents of the selection then save as a PNG directly.
World Map Images in Adobe Illustrator CS5
I have an image Map in illustrator CS5 which i want to save in GIF so as to reduce its size for web use. But when i save it, the map boundaries are having some white pixels all along the map boundaries of map.
I really dont know why has happened to it, but cant save it in Png-8, png-24 formate due to size constraint.
Any meaningful answer will be highly appreciate and thanks in advance.
Is your background a non-changable color? Maybe you can save the image with the same color as a background.
The problem is gifs don't support true transparency.
If this doesn't work can you provide the image you are trying to save (gif and png, I don't have AI right now)? Maybe there will be something I can do about the size or clearing the gif's edges.
transparent GIFs don't have an 8-bit alpha channel, like PNG does: a pixel in a GIF is either there, or it's not: if it's there, you can't see through it. This often means that an edge between transparent and non-transparent areas looks blocky.
There are two ways to deal with this... either use a PNG 24 (and the Illustrator Save for Web feature will help you to make it smaller), or in Illustrator create a background color layer behind your image before you export to GIF. If this background color layer is the same as the website you put the image on, the edges will blend nicely.
I am building a website with a TON of png-24 files that have transparent background. In IE 6 they obviously aren't displayed correctly, so I need some sort of reliable, good solution that will fix the PNG problem in IE and require little work and be reliable. Any good ideas?
For IE6 transparency I follow a personal flow:
1. If there is just one or two PNG images (like a logo, or a normal image) I just use filter:
#selector {background:none; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='test.png', sizingMethod='crop');}
Problems: If applied to a link, it will no longer be clickable. Possibly apply to the h1#logo and have the a be transparent.
2. If I have a lot of 24-bit PNG files, or special use cases (repeating background, etc), I use DD_belatedPNG
IMPORTANT FOR IE7 + IE8: You cannot animate or combine the filter:alpha (which is used for overall opacity on an element in IE and also used by jQuery to set opacity) property with 24-bit transparent PNG images. It changes it to look like 8-bit transparency, with everything that is not 100% opaque or transparent taking on a black background.
Here are a few good png fixes for ie6:
http://labs.unitinteractive.com/unitpngfix.php
http://www.twinhelix.com/css/iepngfix/
There are a lot IE PNG fixes on the net, which basically all work with the same technique. The older Internet Explorers do not support alpha in PNGs directly, but they all have a filter that does so. So writing the following code as part of a css of an object puts the image in the src to the background of the element:
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='image.png');
That way, you can easily display transparency in the Internet Explorer. However it's a lot easier to just get one of the png fix scripts (in JavaScript) and include it to your page inside of conditional comments. Then the script will make all your images working automatically.
We used Dean Edwards' IE7 for this. (So named before IE7 came out.) It's been good for that kind of thing.
There are currently many options to get this working. The standard is apply a DirectX filter through CSS to change make the PNG transparent in IE6. There are even scripts that will automatically do this when the webpage loads from an IE6 or less client.
http://www.google.com/search?btnG=1&pws=0&q=transparent+png+ie6
background image of type PNG is not transparent in ie6
See these posts
IE6 PNG transparency
How to use semi-transparent png images in IE6
This is a known issue in IE6: Transparent PNGs are only supported with some hacks.
This is a well-know bug. There are several workarounds, e.g. you can try using Google's ie7-js library.
I think you should definitely check the JQuery plugin called Supersleight, created by the guys on All In The Head & 24 Ways. They fixed some problems that comes with using AlphaImageLoader on IE6. From the 24 Ways page:
Works with both inline and background images, replacing the need for both sleight and bgsleight
Will automatically apply position: relative to links and form fields if they don’t already have position set. (Can be disabled.)
Can be run on the entire document, or just a selected part where you know the PNGs are. This is better for performance.
Detects background images set to no-repeat and sets the scaleMode to crop rather than scale.
The last one is the most important! Here are the links:
http://allinthehead.com/retro/338/supersleight-jquery-plugin
http://24ways.org/2007/supersleight-transparent-png-in-ie6
I had an issue once about png transparency in ie6 and what saved me was this:
http://allinthehead.com/retro/338/supersleight-jquery-plugin
hope it help.