How do I set the background-image property to a linear gradient using jQuery's css method?
When I use this on my page the background gradient doesn't appear (I'm only worried about Safari and Firefox at the moment):
$("#myElement").css({
backgroundImage: "-webkit-gradient(linear, top, bottom, from(black), to(white)",
backgroundImage: "-moz-linear-gradient(top, black, white)"
});
I tried using just one or the other as well in the appropriate browsers, but no luck there.
I can just use an in开发者_Go百科line style attribute for the element in my code, but I'd rather not do it that way if there's a way to do it using jQuery's API.
The following works for me.
$("#myElement").css({
background: "-webkit-gradient(linear, left top, left bottom, from(#000000), to(#FFFFFF))"}).css({
background: "-moz-linear-gradient(top, black, white)"
});
jsFiddle Demo
Changes:
- background instead of backgroundImage
- top, bottom to: left top, left bottom
- missing closing parentheses from the webkit gradient
- changed black and white to #000000 and #FFFFFF
- added a second .css
Tested on Chrome and FF 6
I tried this on Firefox 6.0.1 and it works for me
$(function() {
$("#myElement").css({
backgroundImage: "-webkit-gradient(linear, top, bottom, from(black), to(white)",
backgroundImage: "-moz-linear-gradient(top, black, white)"
});
});
HTML
<div id="myElement">testing</div>
There may be some difference between newer and older webkit versions:
How do I combine a background-image and CSS3 gradient on the same element?
I got a little sample working with the following:
$(function(){
$("#myElement").css("background-image", "-webkit-linear-gradient(top, #000000, #ffffff)");
$("#myElement").css("background-image", "-moz-linear-gradient(top, black, white)");
});
here's a fiddle:
http://jsfiddle.net/Hmmpd/1/
Edit:
Odd, using the css "map" version of css work in Firefox but not my version of Chrome. I.e. the following works for me in firefox but not chrome:
$(function(){
$("#myElement").css({backgroundImage: "-webkit-linear-gradient(top, #000000,#ffffff)",backgroundImage: "-moz-linear-gradient(top, black, white)"});
});
精彩评论