jQuery-更改多个背景图像

雅库布·斯沃博达(Jakub Svoboda)

我有一个CSS代码,可使用8张图片创建框架:

background-image: url(images/blue/tl.png), url(images/blue/tr.png), url(images/blue/bl.png), url(images/blue/br.png), url(images/blue/t.png),url(images/blue/b.png),url(images/blue/l.png),url(images/blue/r.png);
background-position: top left, right top, bottom left, bottom right, top, bottom, left,right;
background-repeat:  no-repeat,no-repeat,no-repeat,no-repeat,repeat-x,repeat-x,repeat-y,repeat-y;

我的目标是制作一个JQuery程序,该程序可以将源更改为不同的图像。我在为多个背景图像定义JQuery中的更改时遇到问题。我总是只能更改一张图像。

jQuery代码:

$(document).ready(function() {
        $("#red").on("click", function(){
            $("#outer-frame").css({'background-image': "url(images/red/tl.png)", 'background-image': "url(images/red/tr.png)"});
            $("#outer-frame").css({'background-position': "top left", 'background-image': "top right"});
        });

如果有人知道如何做到这一点对我有帮助,我将不胜感激。谢谢你的建议。

阿德内

要使用javascript设置多个背景图片,您只需设置一次样式,但将多个背景的字符串作为值,否则每次重置样式都会覆盖以前的样式。

$("#outer-frame").css({
    'background-position' : 'top left',
    'background-image'    : 'url(images/red/tl.png), url(images/red/tr.png)'
});

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

使用jQuery addClass更改背景图像

来自分类Dev

使用JQuery更改背景图像

来自分类Dev

jQuery无法更改背景图像URL

来自分类Dev

褪色动态更改(jQuery)的背景图像?

来自分类Dev

jQuery获取多个CSS背景图像URL

来自分类Dev

通过jQuery更改webkit-slider-thumb的背景图像

来自分类Dev

如何使用jQuery更改输入按钮的背景图像

来自分类Dev

jQuery通过滚动逐渐更改背景图像

来自分类Dev

jQuery更改背景图像还原回旧的

来自分类Dev

jQuery悬停以固定位置更改背景图像

来自分类Dev

如何使用jQuery更改输入按钮的背景图像

来自分类Dev

使用jQuery动态更改背景图像并设置动画效果

来自分类Dev

使用jQuery和逻辑流语句更改背景图像

来自分类Dev

通过 jquery setTimeout 更改 css 背景图像属性

来自分类Dev

在 IE 11 上使用 jquery 不会更改背景图像

来自分类Dev

无法使用 jQuery 更改正文中的背景图像

来自分类Dev

尝试使用CSS和JQUERY循环播放幻灯片中的多个背景图像

来自分类Dev

Javascript使用HTML DOM或Jquery添加多个背景图像

来自分类Dev

从jQuery数组加载CSS背景图像

来自分类Dev

jQuery缩小背景图像但保持高度

来自分类Dev

jQuery中的背景图像实际大小

来自分类Dev

如何使用jquery设置背景图像

来自分类Dev

jQuery缩小背景图像但保持高度

来自分类Dev

jQuery Navbar背景图像改组问题

来自分类Dev

jQuery在悬停时更改div的背景图像(带有淡入淡出动画)

来自分类Dev

更改jQuery幻灯片脚本以旋转在CSS类中定义的背景图像

来自分类Dev

使用jQuery单击输入类型按钮时如何更改画布背景图像?

来自分类Dev

如何使用jquery和css使用动画更改单击背景图像

来自分类Dev

jQuery:如何通过在文本字段中键入来更改背景图像?

Related 相关文章

  1. 1

    使用jQuery addClass更改背景图像

  2. 2

    使用JQuery更改背景图像

  3. 3

    jQuery无法更改背景图像URL

  4. 4

    褪色动态更改(jQuery)的背景图像?

  5. 5

    jQuery获取多个CSS背景图像URL

  6. 6

    通过jQuery更改webkit-slider-thumb的背景图像

  7. 7

    如何使用jQuery更改输入按钮的背景图像

  8. 8

    jQuery通过滚动逐渐更改背景图像

  9. 9

    jQuery更改背景图像还原回旧的

  10. 10

    jQuery悬停以固定位置更改背景图像

  11. 11

    如何使用jQuery更改输入按钮的背景图像

  12. 12

    使用jQuery动态更改背景图像并设置动画效果

  13. 13

    使用jQuery和逻辑流语句更改背景图像

  14. 14

    通过 jquery setTimeout 更改 css 背景图像属性

  15. 15

    在 IE 11 上使用 jquery 不会更改背景图像

  16. 16

    无法使用 jQuery 更改正文中的背景图像

  17. 17

    尝试使用CSS和JQUERY循环播放幻灯片中的多个背景图像

  18. 18

    Javascript使用HTML DOM或Jquery添加多个背景图像

  19. 19

    从jQuery数组加载CSS背景图像

  20. 20

    jQuery缩小背景图像但保持高度

  21. 21

    jQuery中的背景图像实际大小

  22. 22

    如何使用jquery设置背景图像

  23. 23

    jQuery缩小背景图像但保持高度

  24. 24

    jQuery Navbar背景图像改组问题

  25. 25

    jQuery在悬停时更改div的背景图像(带有淡入淡出动画)

  26. 26

    更改jQuery幻灯片脚本以旋转在CSS类中定义的背景图像

  27. 27

    使用jQuery单击输入类型按钮时如何更改画布背景图像?

  28. 28

    如何使用jquery和css使用动画更改单击背景图像

  29. 29

    jQuery:如何通过在文本字段中键入来更改背景图像?

热门标签

归档