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]+ ")" );

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

1 个答案: