在 Blogger 中制作第一张照片作为帖子背景图片答案

【问题标题】：Make first photo as the post background image in Blogger在 Blogger 中制作第一张照片作为帖子背景图片
【发布时间】：2020-02-06 14:23:59
【问题描述】：

我想为每个帖子设置一个背景，该背景是帖子的第一张图片。我尝试了以下方法，但没有成功：

<Variable name="body.background" description="BackGround" type="background" color='transparent' default="$(color) 
url(<data:post.firstImageUrl/>) no-repeat fixed top center" 
value="$(color) url(<data:post.firstImageUrl/>) no-repeat fixed top center"/>

【问题讨论】：

可以编辑模板吗？
是的，我可以，但是我遇到了这个问题，我无法解决它

标签： html css blogger

【解决方案1】：

您可以对模板进行一些更改。找到具有 post hentry 类的 div 并添加以下属性不干扰现有标记：

expr:style='data:post.firstImageUrl ? &quot;background-image: url(&quot; + data:post.firstImageUrl + &quot;)&quot; : &quot;&quot;'

所以标记看起来像：

<div
    class='post hentry uncustomized-post-template'
    itemprop='blogPost'
    itemscope='itemscope'
    itemtype='http://schema.org/BlogPosting'
    expr:style='data:post.firstImageUrl ? &quot;background-image: url(&quot; + data:post.firstImageUrl + &quot;)&quot; : &quot;&quot;'
>

最后添加一些CSS来控制背景图片的剩余属性：

.post.hentry {
    background-attachment: fixed;
    background-position: top center;
    background-repeat: no-repeat;
}

【讨论】：

我在我的博客上对此进行了测试，它按预期工作。
你能给我一个链接吗？

【解决方案2】：

让你的背景变量为其他页面渲染一个默认背景，并添加一个 css 代码来使用标签 <data:view.featuredImage/> 覆盖正文背景样式，它会红化帖子中的第一张图片，你可以在小部件之外使用它：

<style type='text/css'>
    body { 
        background: url('<data:view.featuredImage/>');
    }
</style>

【讨论】：