固定位置背景剪辑文本

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;
}

如您所见，背景剪辑适用于每个文本都是新图像。我喜欢做的是单个背景图像（全屏），当我们向下滚动时，将通过文本背景剪辑看到它。

寻找解决方案

Answer 1

试试这个，我已经为background属性添加了一些额外的属性来实现全屏效果，并将background-size设置为覆盖 -

.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 Example

修改

如果您想要拆除background中所有添加的值，请在此处设置具有已定义属性名称的值。

.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;
}

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;
}