使用 jQuery 应用 css3 渐变

发布于 2024-11-07 19:58:47 字数 704 浏览 2 评论 0原文

最终，我希望根据不同的事物动态改变渐变，但是如何让 jquery 应用 css3 渐变？

 //works
 $(element).css("background-image", "url(http://www.google.co.uk/images/logos/ps_logo2.png)");  

 //doesn't work
 $(element).css("background-image","-webkit-gradient(linear,left bottom,right bottom,color-stop(0.50, rgb(194,231,255)),color-stop(0.50, rgb(255,255,255))");

 //doesn't work
 $(element).css("background-image","-moz-linear-gradient(left center,rgb(194,231,255) 28%,rgb(255,255,255) 28%");

我缺少什么？我也尝试过

 $(element).css({background: "-webkit-gradient(linear,left bottom,right bottom,color-stop(0.50, rgb(194,231,255)),color-stop(0.50, rgb(255,255,255)"});

这些方法无效吗？

原文

Eventually, I wish to dynamically alter gradients based on different things, but how do I get jquery to apply a css3 gradient?

 //works
 $(element).css("background-image", "url(http://www.google.co.uk/images/logos/ps_logo2.png)");  

 //doesn't work
 $(element).css("background-image","-webkit-gradient(linear,left bottom,right bottom,color-stop(0.50, rgb(194,231,255)),color-stop(0.50, rgb(255,255,255))");

 //doesn't work
 $(element).css("background-image","-moz-linear-gradient(left center,rgb(194,231,255) 28%,rgb(255,255,255) 28%");

What am I missing? I've also tried

 $(element).css({background: "-webkit-gradient(linear,left bottom,right bottom,color-stop(0.50, rgb(194,231,255)),color-stop(0.50, rgb(255,255,255)"});

Are these approaches not valid?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

塔塔猫 2024-11-14 19:58:47

你的第二种方法看起来不错...也许你也需要非 webkit 浏览器的 css 样式... 跨浏览器 CSS 渐变

这个对我有用在 Chrome 中

$('#block').css({
    background: "-webkit-gradient(linear, left top, left bottom, from(#ccc), to(#000))" 
});

也可以看看位于：http://www.colorzilla.com/gradient-editor/

Your second approach looks OK... Maybe you need to css styles for non-webkit browsers as well... Cross-Browser CSS Gradient

This works for me in Chrome

$('#block').css({
    background: "-webkit-gradient(linear, left top, left bottom, from(#ccc), to(#000))" 
});

Also have a look at: http://www.colorzilla.com/gradient-editor/

回复收藏 0 原文

谁对谁错谁最难过 2024-11-14 19:58:47

另一种选择是使用 jQuery addClass 方法。这允许您动态添加和删除类以及与该类关联的任何格式，包括渐变。

回复收藏 0 原文

面犯桃花 2024-11-14 19:58:47

这是一个小例子......

$("p").css({background:'linear-gradient(red,blue,red)'});

Here is a small piece of example...

$("p").css({background:'linear-gradient(red,blue,red)'});

回复收藏 0 原文

苄①跕圉湢 2024-11-14 19:58:47

我在 JSON 格式中使用连字符语法（为了保持一致，我始终使用 JSON 格式）。而且它在 Chrome 和 Firefox 中都运行良好。

例如：

$("#googleFeed div:even").css({
    'background':'-webkit-linear-gradient(top,white,black)',        
});

I'm using the hyphenated syntax in the JSON format (I always use the JSON format to be consistent). And it's working fine in both Chrome and Firefox.

For example:

$("#googleFeed div:even").css({
    'background':'-webkit-linear-gradient(top,white,black)',        
});

回复收藏 0 原文

月牙弯弯 2024-11-14 19:58:47

试试这个

<div class="mygradient" />

$( '.mygradient' ).css( 
    "background-image", 
    "linear-gradient( to right, #dc8a8a 50%, red 10% )" 
);

try this

<div class="mygradient" />

$( '.mygradient' ).css( 
    "background-image", 
    "linear-gradient( to right, #dc8a8a 50%, red 10% )" 
);

回复收藏 0 原文

分分钟 2024-11-14 19:58:47

在 jquery 中使用 .css() 时，我相信您必须使用属性的缩短版本。例如，margin-left 将是 marginLeft

$(element).css("backgroundImage","-webkit-gradient(linear,left bottom,right bottom,color-stop(0.50, rgb(194,231,255)),color-stop(0.50, rgb(255,255,255))");

When using .css() in jquery, I believe you have to use the shortened versions of the attributes. For example, margin-left would be marginLeft

$(element).css("backgroundImage","-webkit-gradient(linear,left bottom,right bottom,color-stop(0.50, rgb(194,231,255)),color-stop(0.50, rgb(255,255,255))");

回复收藏 0 原文

~没有更多了~