Question

我想知道带有背景图像的透明文字，这样你就可以通过文字看到图像了。经过长时间的互联网搜索，我找到了这个css解决方案：http://jsfiddle.net/7WP6f/

代码：

<script src="http://code.jquery.com/ui/1.10.1/jquery-ui.js"></script>
<div id="logo">
            <span>t</span>
            <span>e</span>
            <span>x</span>
            <span>t</span>
</div>


CSS:
#logo
{
    color: black;
 -webkit-text-fill-color: transparent;
 background: url('http://d24w6bsrhbeh9d.cloudfront.net/photo/6730501_700b_v1.jpg') repeat 0 0;
 -webkit-background-clip: text;
 background-size: 0;
 -webkit-background-size: auto;
 -o-background-size: 0;
}

#logo span
{
    font-family: 'Trebuchet MS';
    font-size: 300px;
    cursor: pointer;
}

现在问题是，我想让这些字母可拖动，所以字母的背景会“移动”，但只是添加jQuery UI draggable不起作用（你可以在上面的例子中看到它，只是取消注释jQuery命令）。

有没有办法达到这个效果？只有我能够解决的解决方案是在白色画布上制作带有透明字体的PNG字母（在Photoshop中），为每个字母添加背景图像，并使用jquery.backgroundpos.js在拖动对象时移动背景。虽然这有效但是透明字母的白色环境存在问题（当你在另一个字母上移动字母时可以看到它们。）

感谢您的任何建议

jQuery - 透明和可拖动的文本

0 个答案: