html – 修正文本的位置背景剪辑

概述是否可以在固定位置保留背景剪裁图像(文本中)？ 你可以在这里看到一个例子 http://codepen.io/anon/pen/WQzpWQ CSS： .text { background: url(http://publicdomainarchive.com/wp-content/uploads/2014/05/public-domain-images-free-stock-photos-t 是否可以在固定位置保留背景剪裁图像(文本中)？

你可以在这里看到一个例子
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;}

如您所见,背景剪辑适用于每个文本,它是一个新图像.相反,我喜欢做的是单个背景图像(全屏),当我们向下滚动时,将通过文本背景剪辑看到它.

寻找解决方案

解决方法 试试这个,我在background属性中添加了一些额外的属性来实现全屏效果并设置背景大小来覆盖 –

.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

编辑

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

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

总结

以上是内存溢出为你收集整理的html – 修正文本的位置背景剪辑全部内容，希望文章能够帮你解决html – 修正文本的位置背景剪辑所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。