Question

下面是我更改标题标记背景图片的简单代码，但目前无法正常工作

$(window).scroll(function() {
    if ($(this).scrollTop() > 400) {
        $("header").css("background", "url(http://www.kreativestudio.ca/wp-content/themes/parasponsive/images/header_bg2.png) repeat-x scroll 0px rgba(0, 0, 0, 0) !important");
    } 
    else {
        console.log('there');
        $("header").css("background", "url(http://www.kreativestudio.ca/wp-content/themes/parasponsive/images/header_bg.png) repeat-x scroll 0px rgba(0, 0, 0, 0) !important");
    }
});

这段代码中的问题是什么？

Answer 1

从你的jquery语句中删除！important。

$(window).scroll(function() {
    if ($(this).scrollTop() > 400) {
        $("header").css("background", "url(http://www.kreativestudio.ca/wp-content/themes/parasponsive/images/header_bg2.png) repeat-x scroll 0px rgba(0, 0, 0, 0)");
    } 
    else {
        $("header").css("background", "url(http://www.kreativestudio.ca/wp-content/themes/parasponsive/images/header_bg.png) repeat-x scroll 0px rgba(0, 0, 0, 0)");
    }
});

没有必要，因为它的内联样式和jquery css无法正确处理它。

如果您需要它很重要，请查看以下问题： How to apply !important using .css()?

Answer 2

Syntax is wrong change background-image to background and add few css
html,body{
    width:100%;
    height:100%;
    float:left;
}
header {
    width:100%;
    height:100%;
    float:left;    
}

$(window).scroll(function() {
    if ($(this).scrollTop() > 400) {
        $("header").css("background", "url(http://www.kreativestudio.ca/wp-content/themes/parasponsive/images/header_bg2.png) repeat-x scroll 0px rgba(0, 0, 0, 0)");
    } 
    else {
        $("header").css("background", "url(http://www.kreativestudio.ca/wp-content/themes/parasponsive/images/header_bg2.png) repeat-x scroll 0px rgba(0, 0, 0, 0)");
    }
});

FIDDLE

Answer 3

问题在于应用CSS，在背景图像中你只能定义背景图像，“背景”是你的交易，试试这个（我也稍微改变了代码，但这只是一个问题味道;））：

$(window).scroll(function() {

    if ($(this).scrollTop() > 400) {

      $("body").css({
        "background": "url(http://www.kreativestudio.ca/wp-content/themes/parasponsive/images/header_bg2.png) repeat-x scroll 0px rgba(0, 0, 0, 0)"
      });
    } else {
        console.log("there");

      $("body").css({
        "background": "url(http://www.kreativestudio.ca/wp-content/themes/parasponsive/images/header_bg.png) repeat-x scroll 0px rgba(0, 0, 0, 0)"
      });
    }
});

在滚动jquery更改html标头标记背景图像

3 个答案: