php输入框美化,CSS给文本输入框添加背景图片

经常会看到有些网站的文本输入框会用一张比较好看的图片做背景，显得非常好看，下面我们也来尝试一下如何利用css实现的给文本输入框添加背景图片的，首先看一下效果图吧。

下面是以上效果图的html代码：

给文本输入框添加背景图片示例

#phpernote{

width:300px;

height:100px;

background-image:url(http://www.phpernote.com/images/textareabg.jpg);

background-repeat: no-repeat;

background-position: right bottom;

}

这是一个示例！

其实很简单，用CSS定义背景图像就可以了，然后主要就是定义 background-position 的属性值了，该属性的可能值有以下几种情况：

值

描述

top left

top center

top right

center left

center center

center right

bottom left

bottom center

bottom right

如果您仅规定了一个关键词，那么第二个值将是"center"。

默认值：0% 0%。

x% y%

第一个值是水平位置，第二个值是垂直位置。

左上角是 0% 0%。右下角是 100% 100%。

如果您仅规定了一个值，另一个值将是 50%。

xpos ypos

第一个值是水平位置，第二个值是垂直位置。

左上角是 0 0。单位是像素 (0px 0px) 或任何其他的 CSS 单位。

如果您仅规定了一个值，另一个值将是50%。

您可以混合使用 % 和 position 值。