2

我有一个想法，有一个带有背景图像的透明文本，这样你就可以通过文本看到图像。在互联网上长时间搜索后，我找到了这个 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 可拖动是行不通的（您可以在上面的示例中看到它，只需取消注释 jQuery 命令）。

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

感谢您的任何建议

4

0 回答 0