«

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

时间:2024-1-30 09:44     作者:韩俊     分类: Html+Css


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

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

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

<html xmlns="http://www.maopiaopiao.com/php-template-framework/189.html">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<head>
<title>给文本输入框添加背景图片示例</title>
<style type="TEXT/CSS">
#phpernote{
width:300px;
height:100px;
background-image:url(http://www.maopiaopiao.com/images/textareabg.jpg);
background-repeat: no-repeat; 
background-position: right bottom;
}
</style>
</head>
<body>
<textarea id="phpernote">这是一个示例!</textarea>
</body>
</html>

其实很简单,用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 值。

标签: html css

热门推荐