javascript - Tumblr 主题中 CSS 背景中的随机图像

Question

以前可能有人问过这个问题，但我是一个完全的 HTML 菜鸟，我找到的答案都没有帮助我。

在我的 Tumblr 主题中，页眉设置如下:

.siteHeader {
        {block:ifShowHeaderImage}
        background: url({HeaderImage}) no-repeat center center {block:ifFixedHeaderBackground}fixed{/block:ifFixedHeaderBackground};
        background-size: cover;
        {/block:ifShowHeaderImage}
        color: {color:Header Text};
    }

与 {HeaderImage}指存在于 Tumblr 基础架构中的 Tumblr 预设帐户标题图像。我希望我的实际主题上的标题图片在已托管在 Tumblr 上的多个图像之间随机分配，并且我有直接 URL。

有人可以告诉我如何实现这个吗？我发现了很多 Javascript 脚本，但它们只适用于替换 <img src>以及大量 PHP 脚本，但 Tumblr 不支持这些脚本。

提前致谢。

Answer 1

您可以使用 jquery 更改 CSS 参数。

 $('.siteHeader').css( "background-image", "url(yourURL)" );

或者如果它是一个变量

 $('.siteHeader').css( "background-image", "url(" + yourURLVariable + ")" );

这是一个完整的数组示例。如果您使用它，请忽略上面的任何内容。

 // Fill in the URL to your images here in place of 'url1', 'url2' and so on
 var urlArray = [
   'url1',
   'url2'
 ];

 // Script selects a random number here on it's own
 var randomNumber = Math.floor(Math.random() * urlArray.length);
 // Script now sets the background-image css with jQuery here
 $('.siteHeader').css( "background-image", "url(" + urlArray[randomNumber]+ ")" );