Question

我正在一个网站上，该网站的背景SVG位置固定在页面中心。这在台式机上工作正常，但在移动设备上，随着浏览器搜索栏和页脚在滚动时的缩小而移动。我正在寻找一种方法来对抗这种运动，并使图像完美地保持在中央而不会移动。

当前CSS

 .background-name svg{
            height: 8vw;
            position: sticky;
            top: 50vh;
        } 

.background-name svg {
  margin-left: 1px;
  height: 56px;
  top: 50%;
  left: 50%;
  -webkit-transform: translateX(-50%) translateY(-50%);
  -ms-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
  -webkit-user-select: none;
  /* Safari */
  -moz-user-select: none;
  /* Firefox */
  -ms-user-select: none;
  /* IE10+/Edge */
  user-select: none;

html

<div class="background-name">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 145.14 42.77"><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><path d="M24.31,3.27A11.31,11.31,0,0,1,28,12.21a11.37,11.37,0,0,1-3.71,9q-3.72,3.3-10.62,3.3H3.83V42H0V0H13.69Q20.59,0,24.31,3.27ZM3.83,21h9.8c3.38,0,6-.76,7.73-2.3A8.11,8.11,0,0,0,24,12.21a8.06,8.06,0,0,0-2.65-6.43q-2.66-2.3-7.73-2.3H3.83Z"/><path d="M49.71,14.16c2,1.93,3,4.8,3,8.61V34.63A36.27,36.27,0,0,0,53.34,42H49.91a23.08,23.08,0,0,1-.41-4.55h-.12Q46.32,42.61,38.7,42.6a10.84,10.84,0,0,1-7.34-2.42,7.81,7.81,0,0,1-2.8-6.2,7.46,7.46,0,0,1,2.56-6q2.56-2.19,8.82-3.19c2.87-.47,5.94-.83,9.21-1.06V22.3q0-4-2.07-6a7.82,7.82,0,0,0-5.6-1.94,8.21,8.21,0,0,0-5.67,1.8,6.79,6.79,0,0,0-2.18,4.86H29.79A10,10,0,0,1,33.13,14c2-1.81,4.81-2.71,8.35-2.71S47.72,12.23,49.71,14.16ZM40.42,27.85c-3,.43-5,1.1-6.2,2a4.63,4.63,0,0,0-1.77,3.9A5.24,5.24,0,0,0,34.31,38a7.79,7.79,0,0,0,5.16,1.56,10.93,10.93,0,0,0,3.87-.68,8.08,8.08,0,0,0,3-2,9.64,9.64,0,0,0,2.19-3.28,13.78,13.78,0,0,0,.59-4.51v-2.3C46.59,27,43.68,27.34,40.42,27.85Z"/><path d="M74.28,12v3.48a15,15,0,0,0-1.89-.12,8.56,8.56,0,0,0-6.9,2.83c-1.61,1.89-2.42,4.56-2.42,8V42H59.41V12H63v4.72h.12A9.89,9.89,0,0,1,67,13.07a11,11,0,0,1,5.31-1.27A10.14,10.14,0,0,1,74.28,12Z"/><path d="M95.81,42,80.89,26.55h-.12V42H77.11V0h3.66V24.6h.12L94.22,12h5L84.66,25.49,100.89,42Z"/><path d="M118.53,37.85a8.31,8.31,0,0,0,3-4.75h3.77a11.55,11.55,0,0,1-4,6.9,12.9,12.9,0,0,1-8.64,2.77,12.35,12.35,0,0,1-10-4.39Q98.94,34,98.94,26.49a18.37,18.37,0,0,1,1.62-7.88,12.66,12.66,0,0,1,4.66-5.39,13,13,0,0,1,7.17-2,12.42,12.42,0,0,1,8.35,2.83A13.36,13.36,0,0,1,125.08,22a28.16,28.16,0,0,1,.47,5.78H102.66c.08,3.85,1,6.81,2.89,8.85a9.11,9.11,0,0,0,7.08,3.07A9.28,9.28,0,0,0,118.53,37.85ZM105.61,17.17a11.27,11.27,0,0,0-2.89,7.55H122a11.66,11.66,0,0,0-2.89-7.61,9.7,9.7,0,0,0-13.51.06Z"/><path d="M145.14,12v3.48a15,15,0,0,0-1.89-.12,8.56,8.56,0,0,0-6.9,2.83c-1.62,1.89-2.42,4.56-2.42,8V42h-3.66V12h3.6v4.72H134a9.89,9.89,0,0,1,3.83-3.69,11,11,0,0,1,5.31-1.27A10.14,10.14,0,0,1,145.14,12Z"/></g></g></svg></div>

任何建议，不胜感激。

干杯，蒂姆

移动浏览器固定元素随工具栏移动而缩小

0 个答案: