leo*_*ora 7 html asp.net-mvc jpeg dhtml image
我有
我基本上想要一个类似于这的页面:http: //www.craftcuts.com/hand-painted-wooden-letters-single-patterns.html
但我不希望它作为静态页面,我希望用户能够:
然后让它在该模式中显示该名称.
显然我可以为每个字母组合创建单独的jpgs(现在我有一个带有白色背景颜色的字母的jpg)和模式但是我想知道是否有更优雅的编码方式将其动态放置一张图像放在另一张图片上.
编辑:在我的初始帖子中,我认为这必须是一个前端的东西(javascript),但如果它使它更容易(因为一些人问什么是后端),我的后端是一个asp.net -mvc所以如果有一些解决方案可以在服务器端构建它并发送到客户端,我也非常乐意使用它.
Mal*_*ats 15
您可以使用CSS将背景图像应用于图像,然后使用大量透明的.png图像作为字母.
我嘲笑它:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
img.leaves
{
background:url("leaves.png");
}
img.lights
{
background:url("lights.png");
}
</style>
<script type="text/javascript">
function makeText()
{
var text = document.getElementById('text').value.toUpperCase();
var pattern = document.getElementById('pattern').value;
for(var i=0; i<text.length; i++)
{
var img = document.createElement('img');
img.src=text[i]+'.png';
img.className=pattern;
document.getElementById('textArea').appendChild(img);
}
return false;
}
</script>
</head>
<body>
<form onsubmit="return makeText();">
<p><label for="text">Enter your text</label> <input type="text" name="text" id="text" size="20"></p>
<p><label for="pattern">Choose a pattern</label> <select id="pattern"><option value="leaves">Leaves</option><option value="lights">Lights</option></select></p>
<p><input type="submit" value="Make!"></p>
</form>
<div id="textArea"></div>
</body>
</html>
你也可以看到它的实际效果.
替代文字http://www.subdimension.co.uk/files/1/SO/A.png <这是一个字母剪纸(很难看!)
替代文本http://www.subdimension.co.uk/files/1/SO/leaves.png和背景模式之一.
我对G很无聊,所以你只能写出包含字母ag的单词,它也有点懒,因为它只做大写,只有2个模式,但希望它应该足以给你一个想法
通过Javascript执行此操作的最简单方法可能是使用每个字母的图像掩码并将其应用于模式之上.通过图像蒙版,我指的是一个完全黑色(或白色,或任何你喜欢的)的简单图像,其中"切出"的透明部分呈字母形状.您可以简单地将其覆盖在模式文件上以获得想要的效果.
<div style="background: url(pattern.jpg)">
<img src="letter_a.png" />
</div>
您可以动态更改img src和div background url切换模式和字母.您还可以divs根据用户输入动态创建新的.
请注意,由于透明的PNG,这在IE6中不起作用.
或者,您可以使用类似的东西在服务器上动态生成图像gd,这将涉及更多,但最终更灵活.