Html 带图形背景的表单输入

我想让用户有机会输入一些彩色形状的文本。在（例如）illustrator中设计形状、导出为svg并将输入标记（或textarea）放入svg文件中，这是一个好策略吗

还有其他方法吗

---

创建包含高度和宽度元素的div标记，如果需要圆角，可以在CSS中使用

边框半径

div{
  width: 200px;
  height: 200px;
  border-radius: 15px;
  background-color: blue;
}

然后你可以添加任何你想要的文本。它是最好的选择，在背景中添加图像，比纯CSS需要更多的处理时间
 这是一个简单的例子，说明了如何使用CSS来完成您想要的任务—这是您工作的起点

（CSS可以简化，但我故意将其保持详细，以便您可以看到发生了什么以及发生了什么）


.text{
显示：块；
宽度：60vw；
利润率：1rem 20vw；
}
.textlight{
显示：内联块；
宽度：49%；
保证金：1rem 0；
填充：0.9%0.5%；
框大小：边框框；
}
.textright{
宽度：49%；
显示：内联块；
保证金：1rem 0；
填充：05%09%；
框大小：边框框；
}
.TXT区域{
宽度：100%；
颜色：#000；
身高：7雷姆；
字号：1rem；
框大小：边框框；
填充：1rem；
边界：无；
边界半径：2em；
调整大小：无；
溢出：隐藏；
}
#红色的{
背景色：#c00；
颜色：#eee；
}
#绿色的{
背景色：#0c0；
}
#蓝色的{
背景色：#33f；
颜色：#ccc；
}
#黄色的{
背景色：#ff0；
}
一些单词-点击我在这个文本框中输入！
一些留下的字
一些正确的词语
更多单词
请阅读，这可以通过CSS轻松完成查看示例图像；最好的方法是使用纯CSS。它简单、智能、通用。