固定背景附件黑客

想要滚动时固定的固定背景吗？ background-attachment: fixed通常在移动浏览器中失败。这是实现这一效果的解决方法，“黑客”。

问题

让我们用两种背景类型检查问题：线性梯度和图像。

线性梯度

对于滚动的固定梯度，我们可能会使用此CSS：

身体 {
  背景：线性毕业生（335DEG，RGBA（255,140,​​107,1）0％，RGBA（255,228,168,1）100％）;
  背景 - 固定；
  背景位置：中心；
  背景重复：无重复；
  身高：100VH；
}

在Android Chrome和Firefox上，梯度滚动，然后跳。这似乎与浏览器的难度实时重新渲染梯度有关，当时URL栏隐藏/出现。 iOS Safari表现出类似的行为。

背景图像

图像的问题是相同的：

身体 {
  背景：URL（../资产/test_pic.jpg）;
  背景重复：无重复；
  背景大小：封面；
  背景位置：中心；
  背景 - 固定；
  身高：100VH；
}

background-attachment: fixed还忽略了height属性，相对于视口而不是元素的高度计算位置。这可能是因为background-attachment: fixed使用最小的视口，而元素则使用最大的视口。当URL栏更改可见度时，视口单元（VH）不会调整大小。

caniuse突出显示浏览器与background-attachment: fixed 。

解决方案（黑客）

该解决方案涉及删除background-attachment: fixed并使用单独的元素进行固定。如果background-attachment: fixed使用最小的视口，让我们使用使用最大的元素。

创建两个divs：一个用于背景，一个用于内容：

<div class="bg"></div>
<div class="content">

</div>

像这样的样式：

.bg {
  背景：线性毕业生（335DEG，RGBA（255,140,​​107,1）0％，RGBA（255,228,168,1）100％）;
  背景重复：无重复；
  背景位置：中心；
  身高：100VH；
  宽度：100VW;
  位置：固定；
  z index：-1; /* 选修的 */
}

。内容 {
  位置：绝对；
  保证金顶：5REM；
  左：50％；
  变换：Translatex（-50％）;
  宽度：80％；
}

这对于背景图像也类似：

.img {
  背景：url（'../ aSsets/test_pic.jpg'）;
  背景位置：中心；
  背景重复：无重复；
  背景大小：封面；
  位置：固定；
  身高：100VH；
  宽度：100VW;
}

虽然在URL栏藏书时可能会发生较小的滚动，但主要问题得到了解决。

考虑因素

这个“黑客”使用<div>而不是一个<code><img alt="固定背景附件黑客" >标签，可能会影响语义和可访问性。如果图像对于含义至关重要，请使用<img alt="固定背景附件黑客" >使用适当的alt文本更好，即使这意味着黑客无法正常工作。自动内皮可能仍会引起问题的底部导航栏。在这种情况下，可能有必要使用JavaScript。

以上是固定背景附件黑客的详细内容。更多信息请关注PHP中文网其他相关文章！