I'm using background-blend-mode: multiply to display a texture image tinted in different colors. The problem is, until the texture loads, the element briefly shows a bright colored rectangle. How do I avoid this, preferably showing nothing at all until the image loads? The usual tricks of using fallback color (background: #000 url(image.png)) don't seem to work because of blend mode.
Related
I have designed a set of icons in B&W designed to be used on a white background so they are antialiased with different gray pixels. They are very nice so now I would like to use them on a green background but I am not able to "correct" the antialias for the green background. I am quite familiar using paint.net and gimp so I would like to learn how "correct" my icons using one of them.
This is 2022...
In the previous millennium all we had was GIF where pixels were completely opaque or completely transparent, while real edge anti-aliasing requires partial opacity. So you would typically create the image normally with partially opaque anti-aliasing pixels, and then "semi-flatten" it by replacing these partially opaque pixels with fully opaque ones holding the adequate color blend between the object and the intended background. But with modern image formats (PNG and WebP) that support partial opacity this is no longer needed
So:
Open your icon image in Gimp
Make sure it is in RGB mode (Image > Mode > RGB)
Set the Bucket-fill tool to Color erase mode
Bucket-fill the image with the color used for the semi-flattening (white, in your case). Your "gray" pixels should be replaced with the equivalent partially opaque pixels.
So this:
Becomes this:
At that point, if you export your image as a PNG it will be anti-aliased for any background color (and gradients, and patterns...).
If you insist in doing it the old way, you can still use Layer > Transparency > Semi-flatten on that universal image to make sure your image only works on one background:
Google Chrome always seems to be changing the color of an image that I'm trying to match to a background color. I tried saving it in Photoshop and GIMP and even adjusted the color settings in each but it doesn't help in Chrome. FF and IE work fine (for once).
The color of my image is #282828. After I saved it as a PNG, I reopened it in both GIMP and Photoshop and used the eyedropper tool to confirm that the color was still #282828. When it renders in Chrome it's darker. I have a div with a background color of #282828, and the image is right next to it. I took a screen shot and the div's background color was #282828 and the images background color was #1d1d1d. I tried this for several different colors and each has had the same result. I even tried making the source image the color Chrome was rendering it as but Chrome still changes it. So for example, since Chrome was changing #282828 to #1d1d1d, I made the source image #1d1d1d, and when I rendered it in Chrome it was not #1d1d1d, but some other darker color.
At this point, I'm looking for either a fix or a programmatic work-around. Because the image is transparent, has curves, and a drop-shadow, there's really no way for me to avoid replacing the it, or even parts of it, with html.
Update:
I also tried saving it as a jpg and gif. gif actually works but can't preserve the drop shadow. The image I'm using is attached. If I take a screenshot of this in Chrome, GIMP's eyedropper tool says it's #1d1d1d. If I open the original and do the same, it's #282828.
PNG uses gamma correction to try to ensure that the image looks kinda the same across all monitors, and this can cause color mismatches like the one you're seeing. It's a combination of image editor issues and browser issues: image editors are not forced to embed gamma data inside images, and browsers are free to ignore the gamma correction if it's there and free to enforce some at random when it's not there. In this case, I'd rather think that Firefox ignores it.
Use a transparent PNG if you don't want its background to interfere with your page's background.
[EDIT] For your specific case, you may be able to replicate the graphics you're looking for by styling elements, using border-radius and box-shadow, two widely-implemented CSS3 properties that reasonably decay on older browsers.
I'm looking to see if this is possible and if so how to do it. I want the user to upload an image with a white background. The image can be anything from a pair of shoes to a hat. The website will then automatically turn that white background transparent then store it. What I want to know is there a way using HTML Canvas/CSS to transform that white background to 100% transparency?
You can have a look at this answer, which explains nicely how to change colors in an image using javascript : How to change color of an image using jquery
However, you should do this using server side code, and be aware that results may vary, as just removing a color will not look nice on the edges of your object.
Written pages, why in the ie6 png images in it will automatically cast a shadow
There are two possible reasons, depending on how it looks.
IE 6 doesn't support transparency for PNG images (unless you use a filter to display the image), so if there is a transparent background in the image it will be replaced with a solid gray.
The PNG format contains a gamma correction value that was intended to solve some color profiling problems, but it actually hurts as much as it helps as images are displayed somewhat differently on different systems. If you have a color in your PNG image that is supposed to match the background of the page, it might be slightly off, which will show the iamge as a square with a slightly different color.
that's one of the many bugs of IE6: wrong rendering of transparent png's.
there are a lot of JS fixes, like this one, but i've never seen one that works perfectly.
some break the clickable elements that have png background, some others change alignment or margis or position
Is it possible to have a transparent photoshop image render in CSS? I tried saving as jpg and gif with transparency selected but when I overlay it in css it shows the background color behind it and not the image which is under it. I played with the z-index and it didn't help.
Thanks
JPEG images do not support transparency.
You need to save the image as a PNG file, which does support transparency.
If you need to support IE6, you'll also need to use the filter proeprty.
You need to save it using an image format that supports the type of transparency that you want. The JPEG format doesn't support transparency at all.
There are two types of transparency, transparency index and alpha channel. The GIF and PNG-8 formats support transparency index, i.e. one of the 256 colors are chosen to represent transparency. That means that each pixel in the image can only be either 100% transparent or 100% solid.
The PNG-24 format support alpha channel. That is transparency value for each pixel, so that it can be anything from 100% transparent to 100% solid (in 256 levels).
If your image has mostly fully transparent or fully solid pixels, you can use transparency index, but if it has a lot of partly transparent pixels, you have to use alpha channel.
Note that older versions of IE has problems displaying the transparency in PNG-24 images correctly.
First, have a transparent background (as in no background) as the first layer of your photoshop file.
Be sure it has grey and white squares in the background, which means it is transparent.
When you're ready to save, go to the File Menu, and hit Save for Web
Select the PNG file format and be sure it has "Transparency" checked.
Just press SAVE and give it a name and that photoshop image will be saved into a transparent background PNG file which presents more colors, and it's smaller than a GIF file and is as good as a jpg.
As SLaks pointed out, use a PNG image file for this. JPEG won't do, I am not sure why GIF wouldn't work...
I took a look at a project I was doing involving some translucent background and its CSS, and this is what I found:
background-image: url(../images/translucent_white.png);
So it really is that simple. Just save your picture with transparency as a PNG.
You need to save it as a .png file as mentioned but this is tricky when it comes to IE6. It depends on if the image you have is using a gradient that transistition to the transparency. For instance a shadow.
If you have an image that has a shadow (or any gradient) than you are best off using a .png but this will now work for IE6 and you should follow the advice of SLaks. In my experience though I stay away from javascript fixes like this and just choose to save the image w/ the desired background.
If you do no have a gradient then the .gif is the way to go as it will be supported in all browsers.
I recommend using a .gif filetype; it supports transparent backgrounds and works in most cases. .jpgs don't support transparent backgrounds at all. .pngs support nice alpha-transparent backgrounds, but not in IE6. (Using the AlphaImageLoader filter can cause page slowdown and browser crashes.)
First off, make sure that your image has a transparent background in Photoshop - often a white and grey checkerboard. Then, choose "Save for Web" (or something close to that, it varies in different versions) from the File menu, choose whatever GIF preset works best, and be sure that "Transparency" is checked.