Question

这里的CSS真的很新......

我尝试使用CSS调整背景图片以适应标题。到目前为止，我已尝试用div类包装图像本身以试图操纵它......无济于事！

HTML：

{block:ShowHeaderImage}<div class="header-image"><img src="{HeaderImage}" alt=""></div>{/block:ShowHeaderImage}

CSS：

.header-image   {
    position: absolute;
    background-size: contain;
    background-position: -1;
    opacity: .05;
    background-image: url({HeaderImage});
}

标题中还有其他元素，因此是背景位置。

我已成功通过将背景图像放在父类中来调整大小 - 然而，标题图像不能通过{block：ShowHeaderImage}函数切换，也不能改变JUST的不透明度据我所知，背景图片。

我可能在这里犯了一些错误，但最终目标是让它可以调整大小并使用Tumblr的语法进行切换。

Answer 1

自定义图像

您可以使用if运营商检查自定义图片是否已上传：

{block:IfHeaderImage}<div class="header-image"><img src="{HeaderImage}" alt=""></div>{/block:IfHeaderImage}

自定义文字

您可以使用自定义文本为不透明度提供值：

<meta name="text:Header Opacity" content="0.5"/>

.header-image   {
    opacity: {text:Header Opacity};
    background-image: url({HeaderImage});
}

<强>参考

主题选项 - https://www.tumblr.com/docs/en/custom_themes#theme-options

使用CSS全局调整Tumblr Header的大小？

1 个答案:

自定义图像

自定义文字