I have a PNG image containing a white logotype. Is it possible to change the color of the logotype from white to red using CSS only?
Solution 1:
You can convert the .png to .svg and change the color by code.
Solution 2:
A png with your logo in the middle, transparent, over a container, and changing the container's background color.
CSS filters, once they have more browser support, will be able to change display of images in some ways, but the best shot for changing the color that I see in very brief scrolling through MDN documentation would be hue-rotate, and I'm not convinced that could turn white into non-white.
This is how you do it with CSS filters
.white2red {
filter: sepia(100%) saturate(100);
}
Related
We like to get a background on our responsive site that gives the shiny effect of chromed plating.
The real chrome effect is not possible with css. I think I need a picture instead of only css code. But how can I get the right height + width on pc screen + mobile (responsive). And what will me the size (WxH) to include in the css?
How do we do this in css without downgrading the site speed.
We only found images that do not fit our needs.
Thanks in advance.
You can use gradient property of CSS3 to make a chromed color effect using white, gray and black shades.
.yourclass{
background: linear-gradient(angle, color1, color2);
}
Here's the link below to know more about this property.
http://www.w3schools.com/css/css3_gradients.asp
You can see next examples:
Example 1
Example 2
In booth variants you need to use linear-gradient property.
I just downloaded an html template, in that I can see the images having white background, but when those are used in site, they have background color changed.
And this is what I see in the site:
So How to achieve this effect, I spent whole night changing background color of an image in photoshop, that does not look as good as it is in this image,
So there must be some method in CSS to do this..?
This is done by image type. You likely need a PNG with transparency. If you are familiar with photoshop, you just erase the background (so the alpha-layer can show through there) and then save an a png. This will let the background color "show through" the image.
Try this
img {
background-color : blue;
}
This will appear on when you use a png transparent image.
I want to have a transparent png overlay a SVG background as a CSS style in Wordpress.
In the Wordpress back end there is a custom CSS section where I placed this working code.
It is just the background SVG code.
.club {
/** To edit this background, follow this link:
http://svgeneration.com/generate/Happy-Launch Day?
x=50&y=50&radius=50&beam1=ffffff&beam2=52c5ff&beam3=0791b3&shade=ffffff&
*/
background-color: #5EB7CD;background-image:url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxMDAlJyBoZWlnaHQ9JzEwMCUnPgoJPHJhZGlhbEdyYWRpZW50IGlkPSdnJyBjeD0nNTAlJyBjeT0nNTAlJyByPSc1MCUnPgoJCTxzdG9wIG9mZnNldD0nMCUnIHN0eWxlPSdzdG9wLWNvbG9yOiNmZmZmZmY7JyAvPgoJCTxzdG9wIG9mZnNldD0nNTAlJyBzdHlsZT0nc3RvcC1jb2xvcjojNTJjNWZmOycgLz4KCQk8c3RvcCBvZmZzZXQ9JzEwMCUnIHN0eWxlPSdzdG9wLWNvbG9yOiMwNzkxYjM7JyAvPgoJPC9yYWRpYWxHcmFkaWVudD4KCTxyZWN0IHdpZHRoPScxMDAlJyBoZWlnaHQ9JzEwMCUnIGZpbGw9J3VybCgjZyknLz4KCTxzdmcgeD0nNTAlJyB5PSc1MCUnIG92ZXJmbG93PSd2aXNpYmxlJz4KCQk8cmVjdCB3aWR0aD0nMjAwMCUnIGhlaWdodD0nMjAwMCUnIGZpbGwtb3BhY2l0eT0nMC4xJyBmaWxsPScjZmZmZmZmJyB0cmFuc2Zvcm09J3JvdGF0ZSgyMCknLz4KCQk8cmVjdCB3aWR0aD0nMjAwMCUnIGhlaWdodD0nMjAwMCUnIGZpbGwtb3BhY2l0eT0nMC4xJyBmaWxsPScjZmZmZmZmJyB0cmFuc2Zvcm09J3JvdGF0ZSg0MCknLz4KCQk8cmVjdCB3aWR0aD0nMjAwMCUnIGhlaWdodD0nMjAwMCUnIGZpbGwtb3BhY2l0eT0nMC4xJyBmaWxsPScjZmZmZmZmJyB0cmFuc2Zvcm09J3JvdGF0ZSg2MCknLz4KCQk8cmVjdCB3aWR0aD0nMjAwMCUnIGhlaWdodD0nMjAwMCUnIGZpbGwtb3BhY2l0eT0nMC4xJyBmaWxsPScjZmZmZmZmJyB0cmFuc2Zvcm09J3JvdGF0ZSg4MCknLz4KCQk8cmVjdCB3aWR0aD0nMjAwMCUnIGhlaWdodD0nMjAwMCUnIGZpbGwtb3BhY2l0eT0nMC4xJyBmaWxsPScjZmZmZmZmJyB0cmFuc2Zvcm09J3JvdGF0ZSgxMDApJy8+CgkJPHJlY3Qgd2lkdGg9JzIwMDAlJyBoZWlnaHQ9JzIwMDAlJyBmaWxsLW9wYWNpdHk9JzAuMScgZmlsbD0nI2ZmZmZmZicgdHJhbnNmb3JtPSdyb3RhdGUoMTIwKScvPgoJCTxyZWN0IHdpZHRoPScyMDAwJScgaGVpZ2h0PScyMDAwJScgZmlsbC1vcGFjaXR5PScwLjEnIGZpbGw9JyNmZmZmZmYnIHRyYW5zZm9ybT0ncm90YXRlKDE0MCknLz4KCQk8cmVjdCB3aWR0aD0nMjAwMCUnIGhlaWdodD0nMjAwMCUnIGZpbGwtb3BhY2l0eT0nMC4xJyBmaWxsPScjZmZmZmZmJyB0cmFuc2Zvcm09J3JvdGF0ZSgxNjApJy8+CgkJPHJlY3Qgd2lkdGg9JzIwMDAlJyBoZWlnaHQ9JzIwMDAlJyBmaWxsLW9wYWNpdHk9JzAuMScgZmlsbD0nI2ZmZmZmZicgdHJhbnNmb3JtPSdyb3RhdGUoMTgwKScvPgoJCTxyZWN0IHdpZHRoPScyMDAwJScgaGVpZ2h0PScyMDAwJScgZmlsbC1vcGFjaXR5PScwLjEnIGZpbGw9JyNmZmZmZmYnIHRyYW5zZm9ybT0ncm90YXRlKDIwMCknLz4KCQk8cmVjdCB3aWR0aD0nMjAwMCUnIGhlaWdodD0nMjAwMCUnIGZpbGwtb3BhY2l0eT0nMC4xJyBmaWxsPScjZmZmZmZmJyB0cmFuc2Zvcm09J3JvdGF0ZSgyMjApJy8+CgkJPHJlY3Qgd2lkdGg9JzIwMDAlJyBoZWlnaHQ9JzIwMDAlJyBmaWxsLW9wYWNpdHk9JzAuMScgZmlsbD0nI2ZmZmZmZicgdHJhbnNmb3JtPSdyb3RhdGUoMjQwKScvPgoJCTxyZWN0IHdpZHRoPScyMDAwJScgaGVpZ2h0PScyMDAwJScgZmlsbC1vcGFjaXR5PScwLjEnIGZpbGw9JyNmZmZmZmYnIHRyYW5zZm9ybT0ncm90YXRlKDI2MCknLz4KCQk8cmVjdCB3aWR0aD0nMjAwMCUnIGhlaWdodD0nMjAwMCUnIGZpbGwtb3BhY2l0eT0nMC4xJyBmaWxsPScjZmZmZmZmJyB0cmFuc2Zvcm09J3JvdGF0ZSgyODApJy8+CgkJPHJlY3Qgd2lkdGg9JzIwMDAlJyBoZWlnaHQ9JzIwMDAlJyBmaWxsLW9wYWNpdHk9JzAuMScgZmlsbD0nI2ZmZmZmZicgdHJhbnNmb3JtPSdyb3RhdGUoMzAwKScvPgoJCTxyZWN0IHdpZHRoPScyMDAwJScgaGVpZ2h0PScyMDAwJScgZmlsbC1vcGFjaXR5PScwLjEnIGZpbGw9JyNmZmZmZmYnIHRyYW5zZm9ybT0ncm90YXRlKDMyMCknLz4KCQk8cmVjdCB3aWR0aD0nMjAwMCUnIGhlaWdodD0nMjAwMCUnIGZpbGwtb3BhY2l0eT0nMC4xJyBmaWxsPScjZmZmZmZmJyB0cmFuc2Zvcm09J3JvdGF0ZSgzNDApJy8+CgkJPHJlY3Qgd2lkdGg9JzIwMDAlJyBoZWlnaHQ9JzIwMDAlJyBmaWxsLW9wYWNpdHk9JzAuMScgZmlsbD0nI2ZmZmZmZicgdHJhbnNmb3JtPSdyb3RhdGUoMzYwKScvPgoJPC9zdmc+Cjwvc3ZnPg==');
}
I want to overlay this background with this image http://brainclub.nl/3.0/wp-content/uploads/2014/01/Lampjes.png
It is white image with transparent background so you probably wouldn't see it when you click it.
For as far as I can see the problem with combining the two is that the place where I should place the image url is occupied by the SVG code.
background-image:url(
Can anyone help me combine the two?
I will be so grateful.
Thanks.
You can't overlay a bg image as such. You can only overlay elements. You might be able to set multiple background images though by comma separating them.
Codepen Example
Selected CSS
background-image:
url(http://brainclub.nl/3.0/wp-content/uploads/2014/01/Lampjes.png),
url('data:image/svg+xml;base64, **Code chopped**);
}
http://css-tricks.com/stacking-order-of-multiple-backgrounds/
I wish to create breadcrumbs that employ css arrows, and want to apply a gradient on the background, but have been unable to set a gradient for the css triangles themselves.
I'm wondering if I can set an opacity on the triangles , and then lay them over top of a div with the desired background gradient. This also has to be compatible down to IE7. So far no luck. Does anyone have any suggestions?
Use PNG image for the arrow. Arrow image must have transparent background.
The best way to achieve what your looking for would be to use an image. IE7 I don't think supports opacity without some javascript manipulation. Use a gif or another type of image with transparent background.
This is how you set opacity or <=IE8
.triangle {
filter: Alpha(Opacity=80); // ie argh!
opacity: 0.8; // standard browsers
}
In css you may normally set both a background-image, and a background-color, and the image will be rendered on top of the color.
#someDiv
{
background-image: url(arrow.png);
background-color: blue;
}
This will cause #someDiv to have a blue background with the arrow.png image above.
However, what if I want to use firefox's -moz-linear-gradient to do a gradient for the background, then is there a way to make the image render over this gradient?
EDIT:
The MDC states that gradients replace the background-image tag. So in that case, I guess a follow up question is is it possible to specify two background images and have them render one on top of another?
This example on the Mozilla site has background gradients under background images:
https://developer.mozilla.org/en/css/multiple_backgrounds