后台位置无法正常工作

Question

我正在使用 Jekyll，我有以下代码，根据我定义的前题

background-position

更改内联

position

：

* {
  box-sizing: border-box;
}

body{
  padding: 0;
  margin: 0;
}

.page__hero--overlay {
  position: relative;
  margin-bottom: 2em;
  padding: 3em 0;
  clear: both;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  -webkit-animation: intro 0.3s both;
  animation: intro 0.3s both;
    animation-delay: 0s;
  -webkit-animation-delay: 0.25s;
  animation-delay: 0.25s;
}

@media (min-width: 80em)
.page__hero--overlay .wrapper {
  max-width: 1280px;
}

.page__hero--overlay .wrapper {
  padding-left: 1em;
  padding-right: 1em;
}

.wrapper {
  margin-left: auto;
  margin-right: auto;
  width: 100%;
}

.page__hero--overlay .wrapper {
  padding-left: 1em;
  padding-right: 1em;
}

.parallax {
  background-attachment: fixed;
}

.page__hero--overlay .page__title {
  font-size: 1.953em;
  color: #fff;
  text-shadow: 1px 1px 4px rgba(0,0,0,0.5);
}

.page__title {
  margin-top: 0;
  line-height: 1;
}

h1, h2 {
  -webkit-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
}

h1 {
  margin-top: 0;
  font-size: 1.563em;
}

h1, h2, h3, h4, h5, h6 {
  margin: 2em 0 0.5em;
    margin-top: 2em;
  line-height: 1.2;
  font-family: -apple-system,BlinkMacSystemFont,"Roboto","Segoe UI","Helvetica Neue","Lucida Grande",Arial,sans-serif;
  font-weight: bold;
}

p {
  margin-bottom: 1.3em;
}

.page__hero--overlay .page__lead {
  max-width: 768px;
  color: #fff;
  text-shadow: 1px 1px 4px rgba(0,0,0,0.5);
}

.page__lead {
  font-family: -apple-system,BlinkMacSystemFont,"Roboto","Segoe UI","Helvetica Neue","Lucida Grande",Arial,sans-serif;
  font-size: 1.25em;
}

<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: 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>

但是，在桌面上（w：1500px h：600+）时，如果没有

background-position: 25% 1000%;

，我无法“拉起图像”，而在移动设备上（w：<500- h:900) it has absolutely no effect whatsoever and I don't understand why.

）

Calc(100% - 200px)

在小屏幕上可以工作，但在大屏幕上完全崩溃（我想要的图像）。我做错了什么？

由于 Jekyll，我主要寻找内联修复（据我所知，我无法将变量传递给 SASS）