Question

是否可以使用矢量形状并通过jquery中的按钮动态更改背景图像？

即。我需要一个自定义的形状，并能够有一个按钮，可以将背景图像更改为其他东西..

例如：

说一个有3个按钮的星形，一个说羊，一个说点，一个说纯色

这些按钮会改变星形的背景图像，预先设定的图像应用于按钮名称吗？

如果有意义的话？

提前致谢

利

Answer 1

我将从一个简单的方形div区域开始，并使用此代码更改图像。

  $('#btn1').click(function() {
    $('#divBackground').css('background-image', 'stars.jpg');
});

$('#btn2').click(function() {
    $('#divBackground').css('background-image', 'sheep.jpg');
});

$('#btn3').click(function() {
    $('#divBackground').css('background-image', 'dots.jpg');
});

然后我可能会在这个div的顶部放置一个图像，从中间切出一个星形，用作剪贴蒙版。我可能会对CSS有点困难，你可能需要修改定位和z-index以使其正确。

另一个选择是探索HTML5画布功能，可能是一些更容易的方式去那条路线。

这是一个概念性示例：http://jsfiddle.net/VTQSM/1/

Answer 2

这没有任何意义，但这里有一些东西让你开始：

$("#button").css("background-image", "stars.jpg")

使用jquery按钮自定义形状并更改背景图像？

2 个答案: