html - 文本的固定位置背景剪辑

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