Jekyll中inline background-position属性失效问题求助

问题核心原因 #

你的问题出在.parallax类的background-attachment: fixed属性上：

• 当背景附着方式设为fixed时，背景的定位基准是整个浏览器视口，而非设置背景的.page__hero--overlay元素本身。
• 桌面端视口高度较小，你需要设置极大的百分比（比如1000%）才能让背景向上偏移，因为这个百分比是相对于视口高度计算的；
• 移动端视口高度较大，百分比定位的逻辑完全适配不了元素容器的尺寸，所以看起来无效。

内联修复方案 #

方案1：放弃视差效果，恢复正常定位逻辑 #

如果不需要视差滚动效果，直接在元素内联样式中覆盖background-attachment属性，让定位基准回到元素本身：

<div class="page__hero--overlay parallax" style="background-image: url('https://images.unsplash.com/photo-1514496959998-c01c40915c5f?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1740&q=80'); background-attachment: scroll; background-position: 25% 90%;">
  <div class="wrapper">
    <h1 id="page-title" class="page__title" itemprop="headline">Title</h1>  
    <div style="margin-top: 130px;"></div>
    <p class="page__lead">Something<br>Something</p>
  </div>
</div>

此时background-position的百分比或calc()表达式会基于元素容器尺寸计算，在所有屏幕上正常生效。

方案2：保留视差效果，用视口单位适配定位 #

如果需要保留视差，改用**视口单位（vw/vh）**定义背景位置，让定位随视口尺寸动态调整：

<div class="page__hero--overlay parallax" style="background-image: url('https://images.unsplash.com/photo-1514496959998-c01c40915c5f?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1740&q=80'); background-position: 25vw calc(100vh - 200px);">
  <div class="wrapper">
    <h1 id="page-title" class="page__title" itemprop="headline">Title</h1>  
    <div style="margin-top: 130px;"></div>
    <p class="page__lead">Something<br>Something</p>
  </div>
</div>

• 25vw：水平位置为视口宽度的25%，和原逻辑一致；
• calc(100vh - 200px)：垂直位置为视口高度减去固定像素值，可根据需求调整数值，确保背景在不同屏幕上显示目标区域。

方案3：用CSS变量结合Jekyll Front Matter动态调整 #

利用CSS变量将Front Matter定义的定位值注入内联样式，实现灵活控制：

1. 在页面Front Matter中定义参数：

---
bg_pos_x: 25%
bg_pos_y_offset: -150px
---

2. 在元素内联样式中使用变量：

<div class="page__hero--overlay parallax" style="--bg-y-offset: {{ page.bg_pos_y_offset }}; background-image: url('https://images.unsplash.com/photo-1514496959998-c01c40915c5f?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1740&q=80'); background-position: {{ page.bg_pos_x }} calc(100% + var(--bg-y-offset));">
  <div class="wrapper">
    <h1 id="page-title" class="page__title" itemprop="headline">Title</h1>  
    <div style="margin-top: 130px;"></div>
    <p class="page__lead">Something<br>Something</p>
  </div>
</div>

修改Front Matter的bg_pos_y_offset即可调整背景垂直位置，变量会自动适配视口基准的计算逻辑。

内容的提问来源于stack exchange，提问作者MiguelP