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

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

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

实现代码如下：

<!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 属性的知识可参考：

本文链接：http://www.cnblogs.com/hanzongze/p/js-self-background.html

版权声明：本文为博客园博主 韩宗泽 原创，作者保留署名权！欢迎通过转载、演绎或其它传播方式来使用本文，但必须在明显位置给出作者署名和本文链接！个人博客，能力有限，若有不当之处，敬请批评指正，谢谢！

background 设置文本框背景图的更多相关文章

  1. iOS不得姐项目--登录模块的布局,设置文本框占位文字颜色,自定义内部控件竖直排列的按钮

    一.登录模块的布局 将一整部分切割成若干部分来完成,如图分成了三部分来完成 设置顶部状态栏为白色的方法 二.设置文本框占位文字颜色 <1>方法一与方法二实现原理是同一种,都是通过设置pla ...

  2. SSRS动态设置文本框属性

    SSRS可以通过表达式动态设置文本框所有的属性,比如字体,字号,是否加粗,如下图所示: 汉字和数字英文字母占用的空间不一样,一个汉字占用两个数字和英文字母的空间,VB里有LENB取得字节数,这SSRS ...

  3. jquery设置文本框值 与获取文本框的值

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  4. 纯 JS 设置文本框的默认提示

    HTML5 中有个新特性叫 placeholder,一般用它来描述输入字段的预期值,适用于 text.search.password 等类型的 input 以及 textarea.示例如下: < ...

  5. 【MFC设置静态文本框背景为透明】

    视图类中加入OnCtlColor()函数: IDC_STATIC1为静态文本框ID HBRUSH CAngleView::OnCtlColor(CDC* pDC, CWnd* pWnd, UINT n ...

  6. chrome表单自动填充导致input文本框背景变成偏黄色问题

    你曾遇到过吗? 困扰宝宝好久的问题,本以为是什么插件导致的,结果是chrome浏览器自动填充文本时默认的样式,搜嘎. 一.修改自动填充input文本框背景色: 使用以下代码 可以设置自己的想要的默认文 ...

  7. web前端学习(一） html+js实现文本框背景及只读属性修改

    因为工作需求接触了html+javascript,对于从事嵌入式开发,一直接触c和汇编的我,感觉这种语言是一个的全新的领域,宽松的语法要求,等同于文本逻辑的输出,当然我并不认为它简单,错误检查的缺少让 ...

  8. Android 利用Sharp样式设置文本框EditText圆角形状

    1.首先新建样式文件editsharp.xml: <?xml version="1.0" encoding="utf-8"?> <shape ...

  9. 关于MFC文本框输入内容的获取 与 设置文本框的内容

    八月要开始做界面了<(￣︶￣)/,然而目前只会用MFC╮(╯▽╰)╭ 好吧,言归正传,设置好文本框后,要获取用户输入的内容,可以用: GetDlgItemText() ; 这个函数有两个参数,第 ...

随机推荐

  1. PlayJava Day011

    今日所学: /* 2019.08.19开始学习,此为补档. */ Java异常处理 1.异常的概念:程序运行过程中发生的问题,从而引发了中断. 2.捕获和处理异常:Java中,用try ... cat ...

  2. DevExpress的TextEdit控件没法调整高度解决

    场景 Winform控件-DevExpress18下载安装注册以及在VS中使用: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/1 ...

  3. crm-全总结

    1.什么是crm 客户关系管理系统 ,以客户数据为中心建立一个信息收集.管理.分析和利用的信息系统 2.业务逻辑相关使用crm-app完成 1)路由项目分发到crm-app (别名 传参 命名空间) ...

  4. django1-web开发基础知识

    1.http概述 当前版本:1.1 http协议是一个客户端和服务端请求应答的标准TCP,如浏览器作为客户端发送请求到服务器指定端口 ,服务器将内容返回给服务器 2.协议格式 http定义了客户端与服 ...

  5. FCC---Create Visual Direction by Fading an Element from Left to Right---一个带好看背景色的圆形图案，从左到右移动，透明度opacity渐变为0.1，背景色渐渐消失的效果

    For this challenge, you'll change the opacity of an animated element so it gradually fades as it rea ...

  6. 升鲜宝V2.0_生鲜配送行业，对生鲜配送行业的思考及对系统流程开发的反思_升鲜宝生鲜配送系统_15382353715_余东升

    升鲜宝V2.0_生鲜配送行业,对生鲜配送行业的思考及对系统流程开发的反思_升鲜宝生鲜配送系统_15382353715_余东升 -----生鲜配送行业现状及存在问题----- 1.  从业者整体素质偏低 ...

  7. 我认为现代IDE编辑器应该具有的几个特性和Visual studio 2010增强

    工作中要使用 VS 2010, 有好多年没有使用Visual studio 了, 试了一小会, 发现VS 2010 缺少不少现代IDE应有的特性, 我认为重要的是下面几个特性, VS2010 已经是1 ...

  8. RAW数据格式解析

    RAM数据格式解析 Raw格式是sensor的输出格式,是未经处理过的数据,表示sensor接受 到的各种光的强度. Raw数据在输出的时候是有一定的顺序的,一般为以下四种: 00: GR/BG 01 ...

  9. Excel中的一列数据变成文本的一行数据

    Excel中的一列数据变成文本的一行数据 作者:凯鲁嘎吉 - 博客园 http://www.cnblogs.com/kailugaji/

  10. (四)Amazon Lightsail 部署LAMP应用程序之扩展PHP前端

    扩展PHP前端 既然PHP前端和数据库是分开的,您将为Web层添加可伸缩性和容错性: 在以下步骤,您将获取Web前端实例的快照,并从该快照部署另外2个Web层实例.最终,您将在三个Web实例前面添加一 ...