图片上面添加文本框重叠效果

根据修的图的效果,通过切片,实现文本框和图片重叠。

好的css习惯都是去掉外内边距,为了适应更多的浏览器兼容性。

样式部分:

<style tyle="text/css">

      *{
             padding:0px;
             margin:0px;
        }

   </style>

标签部分:

<div style="position: relative; z-index: 1;">
     <div>
        <img src="images/nav_8.gif" alt="搜索" title="搜索" style="" />
   </div>
   <div style="top: 40px; left: 15px; position: absolute; z-index: 2;">
        <input type="text" style="border: 1px; border-radius: 10px; opacity: 0.6; width: 160px;
          outline: none; padding-left: 23px;" />
     </div>
</div>

解读:第一步把一个大的div的样式设置position:relative;z-index:1.

*[z-index:1其中1的这个值的大表示显示在上面如小如-1则在下面显示针对的是position:absolute生效。

第二部把div包住图片元素。

第三步把div包住文本框,通过设置position: absolute; z-index: 2来显示是否在上面。

通过top和left的值将文本框调整对应图片中的文本框。

第四部通过border: 1px; border-radius: 10px;来设置文本框的圆角和图片中的圆角相对应。

通过设置透明度使得跟图片的融合度更高: opacity: 0.6;

通过设置文本框实际的宽度来对应图片的文本框的宽度:width: 160px;

               通过设置outline: none; 使得文本框获得焦点后不会变回非圆角的文本框。

通过设置padding-left: 23px;使得在图片中的文本框的放大镜图片后跟实际的文本框匹配

*用text-indent来设置上一行的效果gg和ff都兼容,IE9不行。所以用padding-left来代替。

gg、ff、和IE9效果图如下:

时间: 2024-11-05 14:39:06

图片上面添加文本框重叠效果的相关文章

下拉框与文本框重叠,即可以录入又可以选择的效果。

<div style="position:relative;"> <span style="margin-left: 100px; width: 18px; overflow: hidden;"> <select id="brand" name="brandId" style="width:150px; margin-left:-100px;height:21px;">

设置input文本框只读效果

设置input文本框只读效果:在实际应用中可能需要将input文本框设置为只读状态,代码实际非常简单,只要添加一个属性即可.代码如下: <input type="text" value="蚂蚁部落" readonly/> 使用readonly属性即可将文本框设置为只读状态,具体可以参阅<input>标签的readonly属性一章节. 原文地址:http://www.51texiao.cn/HTML5jiaocheng/2015/0521/21

MVC动态添加文本框,后台使用FormCollection接收

在"MVC批量添加,增加一条记录的同时添加N条集合属性所对应的个体"中,对于前台传来的多个TextBox值,在控制器方法中通过强类型来接收.使用FormCollection也可以接收来自前台的多个TextBox值.实现效果如下: 动态添加TextBox: 后台使用FormCollection接收来自前台的TextBox值,再以TempData把接收到的值返回: 当页面没有TextBox,点击"移除",提示"没有文本框可被移除": 在HomeCon

input文本框圆角效果代码实例

input文本框圆角效果代码实例:本章节分享一段代码实例,它实现了将input文本框设置为圆角的功能.代码实例如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>蚂蚁部落</tit

用JS添加文本框案例代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-

PDF编辑技巧之如何给PDF文件添加文本框工具?

如何给PDF文件添加文本框工具?PDF文件添加文本框工具的方法是什么?PDF文件是现在人们常用的一种文件格式,同其他文件一样只是一种单纯的文件格式.PDF文件因为本身的安全性和保密性导致不易编辑,想要编辑PDF文件需要专业的编辑工具来进行. 那么如何给PDF文件添加文本框工具呢?这有一款专业的编辑工具迅捷PDF编辑器,下面就一起来看看它是如何实现PDF文件添加文本框的吧!一.运行下载安装好的PDF编辑器软件打开进入到首页,在首页找到并点击[打开更多文件]按钮把准备好的PDF文件添加到软件上:二.

通过jquery来实现文本框和下拉框动态添加效果,能根据自己的需求来自定义最多允许添加数量,实用的jquery动态添加文本框特效

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="content-

WPF 文本框添加水印效果

有的时候我们需要为我们的WPF文本框TextBox控件添加一个显示水印的效果来增强用户体验,比如登陆的时候提示输入用户名,输入密码等情形.如下图所示: 这个时候我们除了可以修改TextBox控件的控件模板之外,其实还有一种比较简单的方式来处理.就是为我们的TextBox控件添加一个触发器,当它的文本值为空并且当它没有焦点的时候,我们就修改TextBox控件的背景样式,我们将它的背景样式设置为VisualBrush,并且在VisualBrush中添加一个TextBlock控件来显示我们需要提示的水

(Android Studio)添加文本框

此文大部分摘自http://hukai.me/android-training-course-in-chinese/basics/firstapp/building-ui.html android : id 这是定义View的唯一标识符.可以在程序代码中通过该标识符对对象进行引用,例如对这个对象进行读和修改的操作(在下一课里将会用到). 当想从XML里引用资源对象的时候必须使用@符号.紧随@之后的是资源的类型(这里是id),然后是资源的名字(这里使用的是edit_message). +号只是当你