从滚动上的固体到淘汰文字

此CSS技巧创建了一个迷人的标题，该标题从纯色转换为敲除文本，作为背景图像滚动。仅使用HTML和CSS实现，此效果涉及两个固定位置容器。一个用淘汰文字显示白色背景；另一个是带有白色文字的背景图像。巧妙的剪裁技术隐藏并揭示了基于滚动位置的文本，从而模拟了背景更改。

重要说明：此技术可能无法在较旧的Internet Explorer版本或移动WebKit浏览器上正常运行。考虑实现兼容性的后备解决方案。

HTML结构

HTML由一个包含两个相同容器的外包装器组成，每个容器都有一个<h1></h1>.title_wrapper div中的元素：

<div class="wrapper">
  <div class="container container_solid">
    <div class="title_wrapper">
      <h1 id="大户外">大户外</h1>
    </div>
  </div>

  <div class="container container_image" aria-hidden="true">
    <div class="title_wrapper">
      <h1 id="大户外">大户外</h1>
    </div>
  </div>
</div>

每个容器使用.container类和唯一标识符（ .container_solid ， .container_image ）。这允许共享的基础样式和个人定位。

初始CSS样式

CSS将两个容器设置为全屏高度（ 100vh ）。 .container_solid .container_image

 .wrapper {
  位置：相对； / *添加以适当定位 */
  身高：100％；
  溢出：隐藏； / *添加以获得更好的溢出控制 */
}

。容器 {
  身高：100VH；
  位置：绝对；
  宽度：100％；
  左：0;
}

.container_solid {
  背景：白色；
  顶部：0;
}

.container_image {
  背景图像：url（/path/to/img.jpg）;
  背景大小：100VW自动；
  背景位置：中心；
  背景 - 固定；
  顶部：100VH;
}

这<h1></h1>元素是样式的。 .container_image的文本是白色的。 .container_solid 's<h1></h1>使用background-clip: text ，带有后备黑色：

 .title_wrapper h1 {
  位置：绝对； / *为精确定位添加 */
  顶部：50％；
  左：50％；
  变换：转换（-50％，-50％）;
  文字平衡：中心；
  字体大小：4em; / *示例字体大小 */
}

.container_solid .title_wrapper h1 {
  background: url(https://images.unsplash.com/photo-1575058752200-a9d6c0f41945?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ);
  背景大小：100VW自动；
  背景位置：中心；
  -webkit-text-fill-color：透明；
  文本填充色：透明；
  -webkit-background-clip：文本；
  背景剪辑：文字；
  颜色：黑色;
}

.container_image .title_wrapper h1 {
  颜色：白色；
}

剪裁和容器定位

关键步骤涉及剪裁容器以隐藏溢出的内容。使用绝对定位，需要手动定位：

 。容器 {
  剪辑：rect（0，自动，自动，0）;
  溢出：隐藏；
  位置：绝对；
  身高：100VH；
  左：0;
  宽度：100％；
  -webkitmask-image：-webkit-linear-Gradient（top，#ffffff 0％，＃fffffff 100％）; / * Safari修复 */
}

.container_image .container_solid top: 100vh; 。

可访问性改进

aria-hidden="true"属性被添加到.container_image ，以告知屏幕读取器该容器纯粹是装饰性的。

这种精致的方法可确保视觉吸引力和可访问性。可以进行进一步的样式调整以个性化文本和整体效果。请记住，在添加动态效果时始终优先考虑可访问性注意事项。

以上是从滚动上的固体到淘汰文字的详细内容。更多信息请关注PHP中文网其他相关文章！