重新定位视差背景位置答案

【问题标题】：Repositioning parallax background-position重新定位视差背景位置
【发布时间】：2020-09-30 18:44:13
【问题描述】：

在我的网站右侧，我有视差滚动图像，因此我尝试重新定位 .image-greet 元素，以便当您位于网站顶部时，玫瑰 image 的底部是居中并填满窗格。

目前，仅显示图像砖墙的顶部。我在修改背景位置以使其向上移动图像时遇到困难。

我尝试使用不同的背景位置、背景位置-x、背景位置-y 变体，并改变偏移量，但我一直在努力做到正确。

下面是完整的代码： https://jsfiddle.net/38wu4dcs/7/

.image-greet,
.image-greet.load {
  
  grid-column: images;
  background: url("https://i.imgur.com/aBaG1o8.jpg");
  margin: 6% auto;
  width: 75%;
  background-repeat: no-repeat;
  background-color: white;
  background-attachment: fixed;
  height: 55%;

  background-size: 40% auto;
  background-position: 90% 20%;
}

感谢大家的帮助！

【问题讨论】：

我有点困惑。蓝色的飞溅面板是从哪里来的？
@RichardHunter 您可以忽略左侧的蓝色背景。我只是把它改成不同的颜色来显示该网站被切成两半

标签： html css background parallax background-position

【解决方案1】：

我通过这个资源想通了：https://css-tricks.com/positioning-offset-background-images/

“如果您需要在 CSS 中将背景图像定位在距左侧 20px 和距顶部 10px 的位置，这很简单。您可以使用 background-position: 20px 10px;。但是如果您想将其定位在距右边距底部 10px？”

所以我应用了它并做了

背景位置：右25px下250px；

【讨论】：