固定背景位置的文本背景裁剪方式

Question

能否将背景剪切图像（在文本中）保持在固定位置？

请查看以下示例http://codepen.io/anon/pen/WQzpWQ

CSS:

.text {
  background: url(http://publicdomainarchive.com/wp-content/uploads/2014/05/public-domain-images-free-stock-photos-tree-blossoms-bench-1-1000x666.jpg);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

如您所见，背景剪辑可以为每个文本创建新的图像。相反，我想要的是一张单独的全屏背景图片，在我们向下滚动时，文本背景剪辑将显示出这张背景图片。

正在寻找解决方案。

- Mia

Answer 1

尝试一下这个，我已经添加了一些额外的属性到背景属性中以实现全屏效果，并将背景尺寸设置为覆盖 -

.text{
    background: url(http://publicdomainarchive.com/wp-content/uploads/2014/05/public-domain-images-free-stock-photos-tree-blossoms-bench-1-1000x666.jpg) fixed center center no-repeat;
    background-size: cover;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

CodePen示例

编辑

如果您想拆分背景中的所有添加值，可以通过设置具有定义属性名称的值来实现。

.text{
    background: url(http://publicdomainarchive.com/wp-content/uploads/2014/05/public-domain-images-free-stock-photos-tree-blossoms-bench-1-1000x666.jpg);
    background-attachment: fixed;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

- Ramiz Wachtler

Answer 2

您的 .text 类应该像这样：

.text {
  background: url(http://publicdomainarchive.com/wp-content/uploads/2014/05/public-domain-images-free-stock-photos-tree-blossoms-bench-1-1000x666.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-clip: text;
  color: transparent;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

- Drowsy