如何只为一页制作 Tumblr 背景图片？

Question

我希望我的 Tumblr 网站的第一页有一张填满整个屏幕的背景图片，但仅该页面...其他页面将有白色背景。

Website

请帮忙，我已经做了很长时间了..运气不好！

Answer 1

在正文中添加一个包装器（围绕您的页眉、内容和页脚）并为其指定一个 ID。将此 ID 的背景图片（例如#page1）设置为您喜欢的任何内容，在您的情况下为 tumblr 图片。

Answer 2

所以，我的做法是这样的：

创建一个 html 块，其中包含我们需要的属性，我们将只显示在主页中：

<div id="entry"></div>

设置此元素的 css 以将我们的图像包含在样式标签内（或外部 css，如果您这样做的话）并将元素设置为 display:none 作为默认值：

#entry {
   display:none;
   background:url("path/to/image.png") center center no-repeat;
   background-size:cover;
   ...
}

创建一个自定义脚本来检查我们是否在索引页面上，如果我们显示条目元素，否则将其隐藏：

var primaryDir  = document.location.href.split("/")[3]; // get the first directory
var entry = $('#entry'); // cache the #entry selector in a variable
if (!primaryDir){ // if the primary directory is empty show the entry element
   entry.show();
}else{
   entry.hide();
}

您可能需要修改条目元素的 css，但我相信您可以做到。

我尝试添加注释来解释代码。

Answer 3

如何通过 {CurrentPage} 调用页码并将其添加为 ID？像这样：

<body id="page{CurrentPage}">

相应地添加CSS。

#page1 { background... }

希望对您有所帮助。

如何只为一页制作 Tumblr 背景图片？

How can I make a Tumblr background image only for one page?

html

css

background

background-image

tumblr