background 设置文本框背景图指南攻略_背景入门攻略

background 属性的作用是给元素设置背景,它是一个复合属性,常用的子属性如下:background-color 指定元素的背景颜色。background-image 指定元素的背景图像。background-position 指定背景图像的位置,在复合属性中与 size 二选一。background-size 指定背景图片的尺寸,在复合属性中与 po

background 设置文本框背景图指南攻略

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

background 设置文本框背景图指南攻略_背景入门攻略

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

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

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>
海计划公众号
(0)
上一篇 2020/03/26 23:35
下一篇 2020/03/26 23:35

您可能感兴趣的内容

  • CSS设置滚动条样式基础知识_样式小白基础

    webkit滚动条样式重置1、scrollbar包含scrollbar buttons和一个track。track进一步细分为track pieces和thumb。trace pieces为thumb的上半部分和半下部分。2、scrollbar corner为横向和竖向的交叉角区域3、resize用来设置滚动条的交汇处上用于拖动调整元素大小的小控件组成结构图

    2020/03/23
  • 关于ECharts内存泄漏问题基础知识教程_echarts指南攻略

    最近使用websocket加ECharts做了一个实时监控的功能,发现了一个比较严重的问题,就是浏览器运行一段时间就会非常卡,之前在ECharts官网运行官方实例“动态数据 + 时间坐标轴”时,也遇到了同样的情况,只是当时没有当回事,现在来看原来是内存泄漏的问题。那么是什么原因导致的内存泄漏呢?通过上次使用ECharts的经验以及上网查资料得知,原来ECha

    2020/04/05
  • 构建多页面应用——静态资源的处理指南教程_应用小白指南

    图片的引用方式而因为在web中,图片有两种主要的引入方式,第一种是,第二种是backgorund-image: url(…)。前者在html中使用,后者在css中使用。web开发中的图片处理图片常见的类型有jp(e)g,png,gif,包括现在普遍使用的svg以及webp。svg作为矢量图形,有一定的使用场景,而webp作为

    2020/03/31
  • node如何连接数据库?基础入门_数据库小白帮助

    node连接数据库的方法:使用命令npm install mysql –save安装mysql的软件包,在项目文档中使用client.connect()即可连接数据库。node连接数据库的方法步骤如下:1. 安装mysql下载MySQL :MySQL Downloads,并进行安装。安装完,会引导你对数据库进行配置,设置root密码以及创建普通用户以及密码

    2020/03/20
  • mysql图形化管理工入门基础知识 mysql可视化工具哪个好?_mysql零基础入门

    1. 前言MySQL是一个非常流行的小型关系型数据库管理系统。目前MySQL被广泛地应用在Internet上的 中小型网站中。由于其体积小、速度快、总体拥有成本低,尤其是开放源码这一特点,许多中小型网站为了降低网站总体拥有成本而选择了MySQL作为网站数据 库。要管理 MySQL 数据库服务器,不妨来试试以下这些或具有 Web 界面、或拥有前端界面、或包含

    2020/03/26
  • 字体大小自适应纯css解决方案指南教程_自适应入门基础教程

    viewpointcss3提供了一些与当前viewpoint相关的元素,vw,vh,vim等。“viewpoint” = window sizevw = 1% of viewport width1vh = 1% of viewport height1vmin = 1vw or 1vh, 最小1vmax = 1vw or 1vh, 最大兼容性:chrome 2

    2020/03/24
  • Vue自定义指令:实现文字溢出显示、鼠标移入浮层展示全部入门攻略_指令基础知识入门

    首先要知道当前元素的宽
    将文字放到一个容器中,将容器的样式(主要是有关字体的样式)都设置为当前元素的样式,然后获取容器的宽,也就是文字的宽
    如果文字的宽度超过了当前元素的宽度,则给溢出隐藏的css样式 overflow :hidden;text-overflow: ellipsis;white-space: normal定义鼠标移入展示浮层,浮层中显示全部内

    Web前端 2020/03/20
  • Jquery插件开发的方法总汇入门攻略_Jquery指南教程

    jquery插件是用来扩展jquery对象的一种方法,它的使用方法是通过jquery对象$来调用。其中Jquery插件开发一共有三种方式:$.extend()来扩展jQuery ,主要用于向jquery对象添加静态方法$.fn 向jQuery添加新的方法 , 这里的fn等价于prototype,在jquery原型链上添加$.widget()应用jQuery

    2020/04/05
  • 理解强大的 ES6 「 … 」运算符基础知识教程_运算符小白知识

    背景… 运算符, 是ES6里一个新引入的运算法, 也叫展开/收集 运算符, 我们每天都要和它打交道。这篇文章,我就带你系统的回顾下这个运算符, 介绍一些基础和进阶的用法。基础篇先看一下官方描述:Spread syntax allows an iterable, such as an array expression or string, to be ex

    2020/03/24
  • canvas 兼容性和尺寸菜鸟教程下载_canvas入门教程

    一,兼容性 1.ie9及其以上版本 2.canvas 兼容性判断方式

    you browser not support canvas!


    如果不兼容canvas,canvas 标签会被浏览器解析为自定义标签,显示标签内提示信息如果兼容canva

    2020/03/26
  • redux和react-redux小白知识_redux教程视频

    redux和react-redux的关系:redux是react的状态管理工具,却不仅仅只是为了react而生的,所以在使用中会存在痛点。而react-redux是专门为了react定制,目的是为了解决redux的痛点,起到了补充的作用。redux和flux思想:从代码层面而言,flux无非就是一个常见的event dispatcher,其目的是要将以往MV

    2020/03/24
  • vue的生命周期和钩子函数小白入门_生命周期小白教程

    本章目标学会并了解vue的生命周期和钩子函数vue的生命周期和钩子函数其实在提到vue的生命周期和钩子函数的时候,有的人认为常用的钩子函数有10个,也有的人认为是8个,无论是10个还是8个对于我而言都是一样的,我们主要讲解8个vue的钩子函数。首先来一波官网的对于vue生命周期的图解这一张图对于vue的生命周期已经讲解的特别详细了,但是光靠这一张图还不足于了

    2020/03/22
  • 哪种方式更适合在React中获取数据?小白攻略_数据入门百科

    当执行像数据获取这样的I/O操作时,你必须发起获取请求,等待响应,将响应数据保存到组件的状态中,最后渲染。异步的数据获取会要求额外的工作来适应React的声明性,React也在逐步改进去最小化这种额外的工作。生命周期函数,hooks和suspense都是React中获取数据的方式,我将在下面的示例中分别讨论它们的优缺点。只有了解每种方式的具体细节才能帮助你更

    2020/03/23
  • Fakeupdate菜鸟攻略_假装 Windows 升级界面

    Fakeupdate菜鸟攻略 官方网址:http://fakeupdate.net/ 简介描述:假装 Windows 升级界面 简单有趣的一个在线模拟系统升级的网站,好用又好玩,可…

    2020/03/11
  • 对于Node中Express框架的中间件概念的感知使用指南_中间件使用教程

    中间件是什么呢?中间件就是客户端http请求发起传送到服务器和服务器返回响应之间的一些处理函数。 为什么要使用中间件?通过中间件,可以对数据进行操作使得我们能方便地操作请求数据编写服务器响应。如body-parse中间件对post请求的参数进行处理让我们可以通过res.body快速获取请求参数,express-session中间件可以让我们对数据进行保存,e

    2020/03/23
  • Pinbox新手入门_互联网内容收藏存储插件

    Pinbox新手入门 官方网址:https://withpinbox.com/ 简介描述:互联网内容收藏存储插件 「Pinbox」是一个专门用用户打造的专属网络收藏夹,用户通过这款…

    2020/03/11