一个背景粘性且内容可移动的wordpress主题

Posted

技术标签:

【中文标题】一个背景粘性且内容可移动的wordpress主题【英文标题】:A wordpress theme which background is sticky and the content is movable 【发布时间】:2022-01-09 20:44:51 【问题描述】:

我需要一个 wordpress 主题或任何看起来像 https://www.haldiram.com/ 这个并像这样工作的插件。我想在 wordpress 中制作相同的主页和标题,任何人都可以在 wordpress 中帮助我解决这个问题。告诉我如何使用任何插件或使用任何主题来实现同样的事情,或者告诉我任何其他方式来做到这一点。我尝试使用 css 制作这样的背景,但没有成功。我不需要完全相同,但如果对此有一些误解,请告诉我。

【问题讨论】:

【参考方案1】:

重要的是添加background-attachment: fixed; CSS 属性。

另外,您需要使页面内容高度大于窗口才能看到滚动效果。

在下面的演示中,我在.site-content 页面元素上添加了一个min-height: 2500px;

body 
    background-image: url("https://www.haldiram.com/themes/haldiram/images/bg.jpg");
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;


.site-content 
    width: 100%;
    max-width: 1200px;
    min-height: 2500px;
    background-color: #fff;
    padding: 2rem 3rem;
    box-sizing: border-box;
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>

<div class="site-content">
  <h1>This is a Heading</h1>
  <p>This is a paragraph.</p>
</div><!-- .site-content end -->

</body>
</html>

【讨论】:

以上是关于一个背景粘性且内容可移动的wordpress主题的主要内容,如果未能解决你的问题,请参考以下文章

如何在我的 WordPress 主题上获得粘性页脚?

在Wordpress主题中禁用页脚会阻止粘性导航粘滞

Wordpress主题中的相对图像链接

Css 粘性页脚 - 响应式

wordpress主题无法安装怎么办

wordpress install 主题