html – 如何动态地在网页中的图像上放置不同的模式.

>一堆布料图案(简单的jpg文件)
>字母表中每个字母的图像(空白背景)

我基本上想要一个类似于此的页面：
http://www.craftcuts.com/hand-painted-wooden-letters-single-patterns.html

但我不希望它作为静态页面,我希望用户能够：

然后让它以该模式显示该名称.

显然,我可以为每个字母组合创建单独的jpgs(现在我的每个字母都有白色背面颜色的jpg)和模式但是我想知道是否有一种更优雅的编码方式让它动态放置一张图片放在另一张图片上.

编辑：在我的初始帖子中,我认为这必须是一个前端的东西(javascript),但如果它使它更容易(因为一些人问什么是后端),我的后端是一个asp.net -mvc所以如果有一些解决方案可以在服务器端构建它并发送到客户端,我也非常乐意使用它.

解决方法

您可以使用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>

你也可以see it in action.

alt text http://www.subdimension.co.uk/files/1/SO/A.png<这是字母镂空之一(很难看到！) alt text http://www.subdimension.co.uk/files/1/SO/leaves.png和其中一个背景图案.

我对G很无聊,所以你只能写出包含字母a-g的单词,它也有点懒,因为它只做大写但只有2个模式但希望它应该足以给你一个想法

原文地址：https://www.jb51.cc/html/226911.html

html – 如何动态地在网页中的图像上放置不同的模式.

解决方法

相关推荐