Question

我正在使用background-image: url('') CSS属性的网站上工作。

效果很好，但似乎background-position在Firefox中的计算方式与在Safari / Chrome中的计算方式不同。

在我的代码（下方）中，右侧的图像（right-floater类）似乎没有呈现相同的效果。在Firefox和Linux中打开小提琴Chrome浏览器可以看到我在谈论的内容 - 在Firefox中，背景图片的定位远低于Chrome / Safari。

我使用的background-position: 50% 0%;适用于Chrome / Safari，但使用Firefox似乎background-position: 50% 100%提供了相同的结果，而50％0％最终使网站看起来非常糟糕FF。

我试图玩弄很多元素，看起来这就是罪魁祸首......
出了什么问题？

＆＃13;

body {
  background-color: gray;
}

.left-floater {
  height: calc(100vh - 75px);
  width: 40vw;
  background-image: url(https://cdn.shopify.com/s/files/1/2296/3395/files/TOMO-Website-R3-06.svg?10381558204658209910);
  background-size: 50% auto;
  background-repeat: no-repeat;
  background-position: center;
  display: inline-block;
}

.right-floater {
  background-image: url('https://cdn.shopify.com/s/files/1/2296/3395/t/2/assets/Sculpture.jpg');
  background-size: contain;
  background-repeat: no-repeat;
  width: 54vw;
  height: calc(100vh - 75px);
  display: inline-block;
  background-position: bottom;
  background-size: auto 100vh;
  background-position: 50% 0%;
}

＆＃13;

<div class="sticky-wrap">
  <div class="left-floater"></div>
  <div class="right-floater"></div>
</div>

＆＃13;

View on JSFiddle

背景位置在浏览器中不一致，特别是Firefox？

0 个答案: