background 设置文本框背景图

雨点打透心脏的1/2处 2023-08-17 17:27 62阅读 0赞

background 属性的作用是给元素设置背景，它是一个复合属性，常用的子属性如下：

*  `background-color` 指定元素的背景颜色。
 *  `background-image` 指定元素的背景图像。
 *  `background-position` 指定背景图像的位置，在复合属性中与 size 二选一。
 *  `background-size` 指定背景图片的尺寸，在复合属性中与 position 二选一。
 *  `background-repeat` 指定如何重复背景图像。

多数时候，我们都是给 div 等区块元素设置背景，其实还可以通过 background 属性来给文本框设置背景色和背景图片。呈现效果如下：  
![07004][]

实现代码如下：

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>background 设置文本框背景图</title> <style> .search { width: 600px; height: 40px; padding: 5px; border: 1px solid #666666; background-color: #FAF9DE; background-image: url(images/search.png); background-position: center right; background-size: 50px 50px; background-repeat: no-repeat; } .remark { width: 600px; height: 200px; padding: 5px; margin-top: 10px; border: 1px solid #666666; background: url(images/belle.jpg) center center no-repeat; } </style> </head> <body> <input class="search" type="text" placeholder="请输入查询关键词"><br> <textarea class="remark" placeholder="请填写备注信息"></textarea> </body> </html>

更多 background 属性的知识可参考：

*  [CSS background 属性][CSS background]
 *  [CSS background 属性][CSS background 1]

> **本文链接**：[http://www.cnblogs.com/hanzongze/p/js-self-background.html][http_www.cnblogs.com_hanzongze_p_js-self-background.html]  
> **版权声明**：本文为博客园博主 [**韩宗泽**][Link 1] 原创，作者保留署名权！欢迎通过转载、演绎或其它传播方式来使用本文，但必须在明显位置给出作者署名和本文链接！个人博客，能力有限，若有不当之处，敬请批评指正，谢谢！

转载于:https://www.cnblogs.com/hanzongze/p/js-self-background.html

[07004]: /images/20230808/943ba715cdb5453cb2b8cb390a02f299.png
[CSS background]: http://www.w3school.com.cn/cssref/pr_background.asp#target_blank
[CSS background 1]: https://www.runoob.com/cssref/css3-pr-background.html#target_blank
[http_www.cnblogs.com_hanzongze_p_js-self-background.html]: http://www.cnblogs.com/hanzongze/p/js-self-background.html
[Link 1]: http://www.cnblogs.com/hanzongze/