响应式标头中CSS背景转换的问题

Question

我正在尝试获得一个标题，它变得更小的滚动为my site制作。它工作得很好，但尽管CSS中包含了过渡，但只有当小标题转换为大标题(向上滚动)时，标题中的图像才会平滑过渡，反之亦然。它现在看起来有点抖动/小故障。

下面是我对图像的CSS：

徽标：

.Logo.small:hover {
    background: url("images/Logo.png") no-repeat;
    background-size: contain;
    position: absolute;
    top: 8px;
    width: 40px;
    height: 40px;
    z-index: 73;
    -webkit-transition: background-image .5s;
          -webkit-transition: height 0.6s;
    -moz-transition: height 0.6s;
    transition: height 0.6s;
          -webkit-transition: width 0.6s;
    -moz-transition: width 0.6s;
    transition: width 0.6s;
}
.Logo:hover {
  background: url("images/LogoHover.png") no-repeat;
  background-size: contain;
  position: absolute;
  top: 8px;
  width: 81px;
  height: 85px;
  z-index: 70;
  -webkit-transition: background-image .5s;
}
.Logo {
    background: url("images/Logo.png") no-repeat;
    background-size: contain;
    position: absolute;
    top: 8px;
    width: 81px;
    height: 85px;
    z-index: 73;
    -webkit-transition: background-image .5s;
    -webkit-transition: width .5s;
    -webkit-transition: height .5s;
}
.Logo.small {
    background: url("images/Logo.png") no-repeat;
    background-size: contain;
    position: absolute;
    top: 8px;
    width: 40px;
    height: 40px;
    z-index: 73;
    -webkit-transition: background-image .5s;
    -webkit-transition: width .5s;
    -webkit-transition: height .5s;
}

社交图标1：

.Icon_BG1 {
  background: url("images/IconBG.png") no-repeat;
    background-size: contain;
  position: absolute;
  margin-left: 905px;
  top: 26px;
  width: 45px;
  height: 48px;
  z-index: 80;
  -webkit-transition: background-image .5s;
    -webkit-transition: width .5s;
  -webkit-transition: height .5s;
}
.Icon_BG1.small {
  background: url("images/IconBG.png") no-repeat;
  position: absolute;
  margin-left: 905px;
  top: 10px;
  background-size: contain;
  width: 35px;
  height: 35px;
  z-index: 80;
  -webkit-transition: background-image .5s;
  -webkit-transition: width .5s;
  -webkit-transition: height .5s;
}
.Icon_BG1.small:hover {
  background: url("images/IconBGHover.png") no-repeat;
  position: absolute;
  margin-left: 905px;
  top: 10px;
  background-size: contain;
  width: 35px;
  height: 35px;
  z-index: 80;
  -webkit-transition: background-image .5s;

}
.Icon_BG1:hover {
  background: url("images/IconBGHover.png") no-repeat;
  position: absolute;
  margin-left:905px;
  top: 26px;
  width: 45px;
  height: 48px;
  z-index: 80;
  -webkit-transition: background-image .5s;
}

社交图标2：

.Icon_BG_2 {
  background: url("images/IconBG2.png") no-repeat;
  background-size: contain;
  position: absolute;
  margin-left: 960px;
  top: 26px;
  width: 45px;
  height: 48px;
  z-index: 82;
  -webkit-transition: background-image .5s;
    -webkit-transition: width .5s;
  -webkit-transition: height .5s;
}
.Icon_BG_2.small {
  background: url("images/IconBG2.png") no-repeat;
  background-size: contain;
  position: absolute;
  margin-left: 960px;
  top: 10px;
  width: 35px;
  height: 35px;
  z-index: 82;
  -webkit-transition: background-image .5s;
    -webkit-transition: width .5s;
  -webkit-transition: height .5s;
}
.Icon_BG_2.small:hover {
  background: url("images/IconBGHover2.png") no-repeat;
  background-size: contain;
  position: absolute;
  margin-left: 960px;
  top: 10px;
  width: 35px;
  height: 35px;
  z-index: 82;
  -webkit-transition: background-image .5s;
}
.Icon_BG_2:hover {
  background: url("images/IconBGHover2.png") no-repeat;
  position: absolute;
  margin-left:960x;
  top: 26px;
  width: 45px;
  height: 48px;
  z-index: 82;
  -webkit-transition: background-image .5s;
}

Answer 1

这是因为您使用background-size而不是transform来调整图像大小

使用

transform: scale(xx);

用于调整大小