I was wondering if this is possible in pure CSS. Suppose you have an image with white background. Is there a CSS property that removes the specified color from an image and make it transparent?
No Alireza, that's not possible with css I'm afraid.
Related
is there a way to crop a background sprite?
We have our background image to the CSS body class. Now, if there is not an element with a white background overlaying the rest of the sprite, we have this mess of all the other images there.
I tried background-size, but that doesn't do it. So is there a CSS value that I'm missing that defines not just the background position, but also the actual area the image that should be used?
Thanks!
https://www.w3schools.com/css/css_image_sprites.asp - This article covers the use case senario and correct execution of how to use image sprites.
Okay, so the only way I could work out for this is to put the main body page background at the bottom of the sprite. Assign the correct background-position values and add a background-color: #fff, so the rest of the page becomes readable text.
Thanks for your input!
Is it possible to fade the bottom of a background image to transparent? Would I specify background-image and linear-gradient to achieve this?
Thanks!
Not exactly in the way you describe, but you can consider some possibilities to reach the same effect:
Edit the image so that the transparency gradient is part of the image. If the gradient will always be the same and we are talking about a single image, you should do this
Instead of fading the image over the background, put the 'background' color over the image and set a linear gradient on that (in another div or 2nd background in the same container)
You can check out fading css clipping masks, see the Harry Potter example at https://css-tricks.com/clipping-masking-css/ but I am not sure about browser support.
It is also possible to create the fading clipping mask inside an SVG (so the SVG contains a link to the image file and has a clipping mask) I would guess this is more widely supported than the above option
I added these icons http://grab.by/9HYW to my site and wanted to change the color on hover...what is the best solution?
The icons are in png format and would like to change on hover to their blue colors...thanks in advance.
You should generate new blue images with your editor (the one that you've created the first icons), then you use css hover.
You can use a css sprite (arguably the cleanest and most cross-browser comparable way) in which you basically have both the regular and hover state in one image and change the background-position of the div on hover. (xpixelz links should help you.)
If the images are actually printed on the page, you can use javascript to swipe the image with the hover state on hover.
I'm not sure how they are displayed on the page, but if they are on a solid colored background, you could make a png of the negative space and place it inside a div of the exact width and height of the image then just change the background color of the div on hover, since the actual logo is transparent you would see the background color of the parent div.
as you may opt for CSS sprites
http://css-tricks.com/css-sprites/
google for "css sprites generator" if you need a quick way ;)
If you are using flat png icons then you can use jFlat jquery plugin. Remember it only supports for HTML5 supported browsers
source : http://flaticon.sodhanalibrary.com/jFlat.html
If i have a body using a background image and a div inside the body using a set background and color, how can I override the div's style to use the body's background image? I don't want to simply set the background of the div to the image as positioning of the image will be off.
I don't want to simply set the background of the div to the image as positioning of the image will be off.
You mean you want the body's actual background image to be visible (not just the URL being inherited) even though the div has a background color defined? That is not possible.
You would have to give the div a background-color: transparent to make the body's background image shine through.
The W3's background-image documentation specifies that inherit is an invalid declaration for the property.
It seems redundant to post the same information as #Pekka, but his work-around is, probably, the best non-inherit option available; although Eric Meyer's 'Complex Spiral' demo is also an option, which combines position: absolute; with multiple different versions of, essentially, the same background-image to achieve quite an impressive 'tinted/coloured' effect.
In CSS, is there a standard way to colorize or apply a tint to a grayscale image?
I would like to create a grayscale image to show focus over an element, and allow the color of the focus to be configurable by colorizing the grayscale image.
Thanks
You could change the alpha and have a solid background color behind it.
If you use a gradient with alpha-channel you can use absolute-positioning and put it on-top of your image. If you can't make a gradient with an alpha-channel then you can adjust the opacity of the overlay using CSS, but the effect isn't as good.
I used this for an mouseover area-selection for a map and it worked quite well.