固定位置背景剪辑文本

Question

Is it possible to keep background-clipped image (in a text) at fixed location?

You can see an example here 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;
}

As you see, the background-clip works however for every text it's a new image. What ı like to do instead is a single background image (fullscreen) that will be seen through the text background-clip's as we scroll down.

Looking for a solution

Answer 1

Try this out, I've added some extra attributes to the background property to achieve the full-screen effect and set the background-size to cover -

.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

Edit

If you want a teardown of all the added values inside the background , here what it would look like by setting those with defined attribute names.

.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

Your .text class should look like this one:

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