-webkit-background-size 不适用于 jQuery Css答案

【问题标题】：-webkit-background-size doesn't work with jQuery Css-webkit-background-size 不适用于 jQuery Css
【发布时间】：2016-04-02 18:43:01
【问题描述】：

我正在尝试在页面加载后加载背景，但它似乎不像我预期的那样工作。

我之前在 css 中的代码是：

html {
    background: url(<?php echo $this->Cdn->getUrl(); ?>/images/photos/bg-blurred.jpg) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    background-color: #0c1d31;
}

现在我用 jQuery 试试：

jQuery(document).ready(function () {

    jQuery('html').css({
        'background-image': "url('<?php echo $this->Cdn->getUrl(); ?>/images/photos/bg-blurred.jpg')",
        'background-size': "cover",
        'background-color': "#0c1d31",
        '-webkit-background-size': "cover",
        '-moz-background-size': "cover",
        '-o-background-size': "cover",

    }); 
});

似乎 '-webkit-background-size' 和 '-moz-background-size' 和 '-o-background-size' 在使用 jQuery.css 时不起作用。其他 css 属性工作正常。

有什么想法吗？

【问题讨论】：

请在代码中添加一个起点，以便正确快速地回答您的问题。另见stackoverflow.com/help/mcve
@Roy 我不明白我的问题有什么问题？
浏览器在很长一段时间内都不需要前缀，为什么还要麻烦？

标签： javascript jquery html css

【解决方案1】：

如果您只尝试使用“-webkit-background-size”：

jQuery(document).ready(function () {

   jQuery('html').css({
      '-webkit-background-size': "cover"
   });
});

你会看到你的元素看起来像这样：

<html style="background-size: cover;">

所以这不是你的问题。

您可能应该寻找您的网址：

"url('<?php echo $this->Cdn->getUrl(); ?>/images/photos/bg-blurred.jpg')"

如果您使用的是 chrome，请在 Network 选项卡中检查 f12，看看是否没有错误。

【讨论】：

不，问题不存在。背景图像加载良好。只是定心（盖）的问题失败了。我已经用普通的 CSS 代码更新了我的问题。

【解决方案2】：

对不起，这是我的错误。我错过了我的 JS 中的一些代码...

    jQuery('html').css({
        'background-image': "url('<?php echo $this->Cdn->getUrl(); ?>/images/photos/bg-blurred.jpg')",
        "background-repeat": "no-repeat",
        "background-position": "center center",
        "background-attachment": "fixed",
        'background-size': "cover",
        'background-color': "#0c1d31",
        '-webkit-background-size': "cover",
        '-moz-background-size': "cover",
        '-o-background-size': "cover",
    });

很好。

【讨论】：