Question

所以我一直在想一个问这个问题的方法，所以我只会说出我做了什么以及我想做什么。

我在Photoshop中为带有导航栏和登录字段的网页创建了一个简单的设计。我将我需要的图像切片并保存到我的网站文件夹中作为html和图像。我打开了Dreamweaver并打开了那个文件。网页看起来很棒，但我不能在文本框中输入文本，因为它们只是图像。所以我的问题是如何在不丢失设计和字体样式的情况下使这些文本框图像成为真正的文本框？

我的Web编程经验水平：我有HTML和CSS以及一些PHP的编程经验。

Answer 1

您可以使用backgroung-image属性，例如：在你的html / php文件中：

<div class="box">
contents here
</div>

在你的css文件中：

.box
{
background-image:url('image.jpg');
font-family: yourFont;
}

Answer 2

如果你想要人们可以输入内容的HTML字段，那么你需要制作一个表格（如下所示）：

<form>
<input type="text" class="someClass" />
</form>

然后你可以用你的图像添加背景，就像Kelsar写的那样。

.box
{
background-image:url('image.jpg');
font-family: yourFont;
}

首先在HTMl中构建它，然后使用CSS看起来很整洁。如果您对HTML表单没有任何经验，那么您可以在此处阅读：http://www.tizag.com/htmlT/forms.php

祝你好运。我希望它有所帮助。

在photoshop中制作文本框

2 个答案: