图像大小和浏览器差异的问题

Question

我使用此代码将徽标 (.logo) 放置在背景 (.bird-box) 之上，但 .logo

有问题

当我将徽标的实际高度设置为 100px 并使用下面的代码时（高度设置为 100px，一切正常

 .bird-box
 position: relative
 height: 800px
 background:
   image: url(../images/background-small.png)
   size: auto 800px
   position: top center
   attachment: fixed
 overflow: hidden

 .logo
  height: 100px
  width: 100%
  background:
    image: url(../images/shardfund.png)
    position: center
    repeat: no-repeat
  position: relative
  top: 50%
  margin-top: -50px

以上代码的结果：我有两个 windows 可以查看代码：在 Chrome 和 Atom（编辑器）内的浏览器中。

在 Atom 浏览器中：徽标会随着滚动而移动（当我向下滚动时，徽标会向上移动）。背景是静态的。

在 Chrome 浏览器中：徽标随滚动移动但速度较慢，因此当我滚动 800 像素（背景高度）时徽标消失。它始终停留在可见背景的中心，随着背景消失，徽标也会消失（如果不清楚，请道歉，这是我能提供的最好的口头解释）。 P.s。这其实就是想要的效果！我还在 Firefox 中的代码中进行了测试（就像在 Chrome 中一样工作 - 完美）在 IE10 中（像 Atom 浏览器一样工作 - 不好！）

问题：为什么 Atom 和 Chrome 浏览器之间存在差异，如何解决？

然而，当我将我的实际徽标调整为 200 像素的高度并使用下面的代码时，情况就不同了（下面解释）。

 .bird-box
 position: relative
 height: 800px
 background:
   image: url(../images/background-small.png)
   size: auto 800px
   position: top center
   attachment: fixed
 overflow: hidden

 .logo
  height: 200px
  width: 100%
  background:
    image: url(../images/shardfund.png)
    position: center
    repeat: no-repeat
  position: relative
  top: 50%
  margin-top: -100px

实施更改后，徽标变为 200 像素（至少有效），但在移动方面： - 在 Chrome 中，徽标与背景保持静止（不是预期的结果） - 在 Atom 浏览器中它随滚动移动（不是预期的结果）

问题 1：我通常如何调整徽标的大小并设法使其保持在背景的中心，直到背景在滚动过程中消失（如第一个进来的那样 Chrome）

问题 2：我怎样才能让这个动作在所有浏览器中都起作用？

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>BlackBird Co.</title>
<meta name="description" content="">
<meta name="author" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/style.css">
<link rel="icon" type="image/png" href="images/favicon.png">
</head>
<body>
<header class="bird-box">
  <div class="back-bird"></div>
  <div class="logo"></div>
  <div class="fore-bird"></div>
</header>
<section class="content">
  <article>
    <h1>Clothing Store</h1>
    <hr>
    <p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>
  </article>
  <!--Make the webpage scrollable-->
  <div style="height: 2000px"> </div>
</section>
<script src="js/jquery-2.1.3.min.js"></script>
<script src="js/functions.js"></script>
</body>
</html>

Answer 1

在发布这个问题后，我自己进一步研究了这个问题并得出了答案，所以这里是：

使用 javaScript.

$(window).scroll(function(){

  var wScroll = $(this).scrollTop();

  $('.logo').css({
'transform' : 'translate(0px, '+ wScroll /2 +'%)'

  })

});

图像大小和浏览器差异的问题

Issues with image sizing and browser differences

html

parallax

pug

问题：为什么 Atom 和 Chrome 浏览器之间存在差异，如何解决？