3

我想在每次刷新时更改我的 html 的背景图像。

这就是我在我的 CSS 中得到的

html { 
    background-repeat:no-repeat;
    background-position:center center;
    background-attachment:fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

这就是我用 javascript 得到的（在一个单独的 js 文件中）：

var totalCount = 6;
function ChangeBackground()
{
var num = Math.ceil( Math.random() * totalCount );
document.body.parentNode.background = 'background/test/'+num+'.jpg';

}

我在我的 html 末尾调用我的函数：

<script type="text/javascript">
ChangeBackground();
</script>

我无法使用我拥有的 javascript 代码在 html 标记上添加背景。还有其他方法吗？

我希望它专门在 html 标签上，因为我认为那更好：

多亏了 CSS3 中的 background-size 属性，我们可以纯粹通过 CSS 来做到这一点。我们将使用 html 元素（比 body 更好，因为它总是至少是浏览器窗口的高度）。我们在其上设置了一个固定且居中的背景，然后使用设置为 cover 关键字的 background-size 调整其大小。

http://css-tricks.com/perfect-full-page-background-image/

4

2 回答 2

2

尝试将background-image样式属性值设置为 url 而不是直接指定链接

即：使用document.body.parentNode.style.backgroundImage = 'url(background/test/'+num+'.jpg)';而不是document.body.parentNode.background = 'background/test/'+num+'.jpg';

JSFiddle：http: //jsfiddle.net/HHeKK/

于 2012-11-24T16:29:29.060 回答
0

您不能为<html>标签添加背景！

以这种方式更改您的代码：

document.body.style.backgroundImage = 'background/test/'+num+'.jpg';
于 2012-11-24T14:14:26.193 回答