所有回答(2)
你这个加文字是准备在服务器端处理还是在客户端处理呢？说下具体需求
你是想一些文件悬浮在图片上呢，还是给图片打水印呢，现在好多人提问题需求都讲不清楚
园豆：3438
园豆：3438
清除回答草稿
&&&您需要以后才能回答，未注册用户请先。在可编辑div中插入文字或图片的问题解决思路
&最近在网上碰到一个人问了我一个问题，在可编辑p中插入文字或者图片。因为web在线编辑器我从来只是用，基本不会去研究源代码。后来正好一个在线聊天web项目中也要用到这个功能，我就特地看看了代码。
&& 基本上编辑器或者在线聊天web页面，是不太可能用textarea在做输入框的，因为我们可能要插入图片或者超级链接，因此选择在iframe或者p作为输入框是必须的。
&& 我这里用的是 p.
& 要使p可编辑 必须 加入 contentEditable=&true& 这个属性。
& 然后就是获取光标位置(或者选择文字位置)进行文字或者html的插入 。
&由于火狐等标准支持getSelection方法，IE9以上也支持，但是万恶的iE6-8不支持，因此要分两部分代码来写。由于这些代码很简单，以下先贴一遍
[javascript]
function insertHTML(html)&
&&&&&&&&&& var dthis=$(&#p3&)[0];//要插入内容的某个p,在标准浏览器中 无需这句话&
&&&&&&&&&&& var sel,&
&&&&&&&&&&& if (window.getSelection)&
&&&&&&&&&&&& {&
&&&&&&&&&&&&&&&&&&& // IE9 and non-IE&
&&&&&&&&&&&&&&&&&&& sel = window.getSelection();&
&&&&&&&&&&&&&&&&&&& if (sel.getRangeAt && sel.rangeCount) {&
&&&&&&&&&&&&&&&&&&& range = sel.getRangeAt(0);&
&&&&&&&&&&&&&&&&&&& range.deleteContents();&
&&&&&&&&&&&&&&&&&&& var el = document.createElement('p');&
&&&&&&&&&&&&&&&&&&& el.innerHTML =&
&&&&&&&&&&&&&&&&&&& var frag = document.createDocumentFragment(), node, lastN&
&&&&&&&&&&&&&&&&&&& while ( (node = el.firstChild) )&
&&&&&&&&&&&&&&&&&&&& {&
&&&&&&&&&&&&&&&&&&&&&&& lastNode = frag.appendChild(node);&
&&&&&&&&&&&&&&&&&&&& }&
&&&&&&&&&&&&&&&&&&&&
&&&&&&&&&&&&&&& range.insertNode(frag);&
&&&&&&&&&&&&&&&&&&& if (lastNode) {&
&&&&&&&&&&&&&&&&&&& range = range.cloneRange();&
&&&&&&&&&&&&&&&&&&& range.setStartAfter(lastNode);&
&&&&&&&&&&&&&&&&&&& range.collapse(true);&
&&&&&&&&&&&&&&&&&&& sel.removeAllRanges();&
&&&&&&&&&&&&&&&&&&& sel.addRange(range);&
&&&&&&&&&&&&&&&&&&& }&
&&&&&&&&&&&&&&&&&& }&
&&&&&&&&&&& }&&
&&&&&&&&&&& else if (document.selection && document.selection.type !='Control')&&
&&&&&&&&&&& {&
&&&&&&&&&&&&&&
&&&&&&&&&&&&&&& $(dthis).focus(); //在非标准浏览器中 要先让你需要插入html的p 获得焦点&
&&&&&&&& ierange= document.selection.createRange();//获取光标位置&
&&&&&&&&&&&&&&& ierange.pasteHTML(html);&&& //在光标位置插入html 如果只是插入text 则就是fus.text=&...&&
&&&&&&&&&&&&&&& $(dthis).focus();&&&&&
&&&&&&&&&&&&&&
&&&&&&&&&&& }&
& 以上代码基本 完成了 在可编辑p中 插入指定的html内容，这些代码在baidu或者google中到处可以搜到，因此不再解释为什么这么写（太普遍了)
&执行后 会发现在IE或者非标准浏览器中 是正常的。在火狐或者chrome中 就不正常了
譬如& 以下页面 ,我有 不定数量的p(可能是程序动态生成),我只需要其中某一个p进行html的插入，其他不需要。
.....其他html元素.....&
&p id=&p1& contentEditable=&true&& &&/p&&
&p id=&p2& contentEditable=&true& &&/p&&
&&p contentEditable=&true&& id=&p3&&&/p&&
&&input type=&button& id=&cmdInsert& onclick=&执行向p3插入html方法&/&&
&pre name=&code& class=&html&&.....其他html元素.....&/pre&&br&&
&pre&&/pre&&
&如上页面 我只需要p3 支持插入html 其他两个 只是可编辑而已。&br&&
&p&使用上述代码会发现，如果最后一个失去焦点的是 p3 那么一切正常 如果 不是p3 或者 我又点到页面其他控件或者空白处，会发现插入的html没有插入到我们想要的p3中而是插入到了 其他地方。&/p&&
&p&&& 这其实不是bug,而是正常现象，getSelection 可以横跨很多域，因此无法保证 获得出来的range一定是你需要的p&br&&
&p& 这里我再次申明，我实在不想看(哪怕看一眼)国内的在线web编辑器是如何实现的。经过我翻查了度娘和google发现有个思路可以解决。&/p&&
&p&& 其实我们要解决的就是一件事情，每当页面上的元素(包括p或者任意元素) 获得焦点又失去后，我们只需获得最后一个失去焦点的p是否是p3,如果是则执行上述代码，如果不是直接在p3的内容后面加入要插入的html（硬编码就可以。不要告诉我 不会）&/p&&
&p&&&&& 一开始我想到的办法是对p3设置一个click事件以及focus事件，当鼠标点进去或者获得焦点时 把一个变量 譬如叫做isp3 设置为true,点其他地方设置为false（这个方法实际上是行不通的，这里我就不多解释为什么行不通，有各种不同的情形可以导致即使获得焦点，isp3依然不会被设置为true,而且需要对每个html元素设置事件让isp3变为false,这是很恐怖的事情）.&/p&&
&p&& 这里我放出一种比较通用和不容易被干扰的解决办法。&/p&&
&p& 首先在 页面的 最顶部写上&/p&&
&p& &style&&/p&&
&p& p:focus{z-index:100;}& // 这里随意你设置多少值，100只是举个列子&br&&
&p&&/style&&/p&&
&p&上面这个样式告诉我们，当只有p 获得焦点后 他会产生一个css属性就是 z-index被设置成了100，以任何形式失去焦点 这个css属性就没了。当然你也可以设置其他的css属性。因为我们在点button执行函数的时候，p3也会失去焦点（getSelection 依然存在）&/p&&
&p&以下思路就清晰了 我们再写一个函数&/p&&
&p&&/p&&pre name=&code& class=&javascript&&var lastFocusID=&&;&
function getFocus()&
&&&&&&& var plist = document.getElementsByTagName('p');&
&&&&&&& for(var i=0; i&plist. i++)&
&&&&&&&& {&
&&&&&&&&&&& var ta = plist.item(i);&
&&&&&&&&&&& if (window.getComputedStyle(ta, null).zIndex!=null && window.getComputedStyle(ta, null).zIndex == 100) {&
&&&&&&&&&&&&& if(ta.id && ta.id!=null)&
&&&&&&&&&&&&&& lastFocusID=ta.id.toString();&
&&&&&&&&&&&&&& else&
&&&&&&&&&&&&&&& lastFocusID=&&;&
&&&&&&&&&&&&&&&
&&&&&&&&&&& }&
&&&&&&&&&&& else&
&&&&&&&&&&&& lastFocusID=&&;&
&&&&&&&& }&
&//再加入一个全屏事件&
&pre name=&code& class=&javascript&& $(window).click(function(e)&
&&&&&&&&& {&
&&&&&&&&&&& if (window.getSelection)&
&&&&&&&&&&& {&
&&&&&&&&&&&&&&&& var getevent=e.srcElement?e.srcElement:e.//不要告诉我不知道这句的意思&
&&&&&&&&&&&&&&&&
&&&&&&&&&&&&&&& if(getevent.tagName==&INPUT& && getevent.id!=null && getevent.id==&cmdInsert&)&
&&&&&&&&&&&&&&& {&
&&&&&&&&&&&&&&&&&&& //代表 点了插入html的按钮&
&&&&&&&&&&&&&&&&&&& //则不执行getFocus方法&
&&&&&&&&&&&&&&&& }&
&&&&&&&&&&&&&&& else&
&&&&&&&&&&&&&&&&& getFocus();//除非点了那个插入html的按钮 其他时候必须要执行getFocus来更新最后失去焦点的p&
&&&&&&&&&&& }&
&&&&&&&&&&&&
&&&&&&&&&&&&
&&&&&&&&& })&/pre&&br&&
&pre&&/pre&&
& 然后修改一下 insertHTML 这个方法 &pre name=&code& class=&javascript&& function insertHTML(html)&
&&&&&&&&&& var dthis=$(&#p3&)[0];&
&&&&&&&&&&& var sel,&
&&&&&&&&&&& if (window.getSelection)&
&&&&&&&&&&&& {&
&&&&&&&&&&&&&&& if(lastFocusID!=&p3&)&
&&&&&&&&&&&&&& {&&
&pre name=&code& class=&javascript&&&&&&&&&&&&&&&&& $(&#p3).html(dthis.innerHTML+html)&&&& ;//说明 用户可能在其他控件上 进行焦点或者其他操作 则&/pre&//后面不执行了&br&&
。。。。。。。。。。//其他代码照旧&br&&
&pre&&/pre&&
&&& 这样就解决火狐或者chrome里面 会出现乱插入内容的现象。&
&p&&& 当然这只是一个思路， 欢迎大家提供更好的办法和性能更高的思路。&br&&
&/pre&&/pre&&html+css怎么在图片上添加文字_百度知道
html+css怎么在图片上添加文字
答题抽奖
首次认真答题后
即可获得3次抽奖机会，100%中奖。
html+css在图片上添加文字有两种方法如下：1.添加一个DIV，采用绝对定位，图片所属DIV为基准&div style=&position:width:100height:100&&&img src=&& alt=&& /&&div style=&position:width:100height:100z-indent:2;left:0;top:0;&&文字&/div&&/div&第二种方法:图片作为背景图片&div style=&background:url(abc.jpg) no-&&wenzi&/div&背景图片现在有了，然后在上面写上你需要写的字就可以了。
第一种方法：添加一个DIV，采用绝对定位，图片所属DIV为基准&div style=&position:width:100height:100&&
&img src=&& alt=&& /&
&div style=&position:width:100height:100z-indent:2;left:0;top:0;&&
&/div&&/div&第二种方法：图片作为背景图片&div style=&background:url(abc.jpg) no-&&
wenzi&/div&
本回答被网友采纳
如果对图片不做滤镜等特殊效果处理的话可以考虑做&div&背景，但两个&div&嵌套的方法并不好控制，如果这两个块是空的，那他们确实可以嵌套，但如果都有了内容，其中一个块的内容就会被挤出来，即便&div&是真的嵌套在一起的。
第一种方法是写两个 div ，第一个div放图片，并且放在下面；第二个div放文字，并且放在上面。第二种方法是写一个div ，图片作为背景图，然后div中放文字。
图片设置为元素背景，然后就可以在元素里写文字了，看上去就像在图片上添加文字
其他2条回答
为您推荐：
其他类似问题
您可能关注的内容
换一换
回答问题，赢新手礼包
个人、企业类
违法有害信息,请在下方选择后提交
色情、暴力
我们会通过消息、邮箱等方式尽快将举报结果通知您。CSS控制图片和文字在同一行显示且对齐的3种方法
& 发布时间： 16:27:36 & 作者：佚名 &
当文字和图片出现在同一行或者同一个div里面的时候，在浏览器中运行出来的显示效果往往是在不同的行，那么我们怎么才能在css中控制他们在同一行显示呢
初学css的新手朋友经常会遇到一个问题，当文字和图片出现在同一行或者同一个div里面的时候，在浏览器中运行出来的显示效果往往是在不同的行，那么我们怎么才能在css中控制他们在同一行显示呢，其实方法有3种：1、通过添加css的&vertical-align:&；2、如果图片是背景图片，可以在css中设置背景图片，然后设置文字的padding属性；3、把文字和图片分别放入不同的div中。上面三种方法都可以让图片和文字在同一行显示，下面我们用实例来应用一下。 1、在css中给div添加上&vertical-align:middle&属性 我们用&注册、登陆、找回密码&这个在实际运用中经常遇到的情况还做实例，把&注册&和&登陆&做成图片，&找回密码&设置成文字其html代码如下： 代码如下: &div id="denglu"& &img src="reg.gif"& &img src="login.gif"& &a href="#"&找回密码&/a& &/div& css代码： 代码如下: #denglu *{ vertical-align: /* 居中对齐， */ font-size:14 } 在浏览器中运行后的效果图如下： &使用css的&vertical-align:middle&属性让图片和文字在同一行对齐是一种非常常用的方法，希望大家可以掌握。 2、把图片设置为背景图片 如果我们的图片本身是一个背景图片的话，可以在css中使用&background&来设置该图片，然后设置文字的padding属性就可以使他们在同一行显示了，html代码如下： 代码如下: &div id="denglu"& &div id="zhaohuimima"&&a href="#"&找回密码&/a&&/div& &/div& css代码： 代码如下: #denglu { background:url(login.gif) no- } #zhaohuimima{ font-size:14 padding-left:50} 我们在css中设置了背景图片，然后又设置了文字的padding-left属性，这样，图片和文字就在同一行显示了，运行结果就不切图了，你可以自己试一下。 3、下面说下最后一种方法，分别把图片和文字放入不同的div中，然后用&margin&属性进行定位，就可以使他们显示在同一行了，html代码如下： 代码如下: &div id="denglu"& &div id="zhuce"& &img src="reg.gif"/& &div id="zhaohuimima"&&a href="#"&找回密码&/a&&/div& &/div& css代码如下： 代码如下: #zhaohuimima{ font-size:14 margin-top:-16 padding-left:50} 在浏览器中运行以后，你会发现，这个方法也可以让图片和文字在同一行显示，但是看起来好像麻烦了一点，所以个人还是比较推荐第一种方法的。
大家感兴趣的内容
12345678910
最近更新的内容背景图片加文字代码.&用HTML制作表格
背景图片加文字代码
方法一：文章编辑的时候点击创建表格后在弹出的窗口中把边框设置为0,然后填上背景图片的链接地址就好了
也可以用代码：
&TABLE height=600
width=600 background=你的背景图片地址 border=0&
&TD&你的背景图片地址&/TD&&/TR&&/TBODY&&/TABLE&
background=你的背景图片地址&
使图片始终位于页面的中间，而且在拉动浏览器窗口的滚动条时，照片仍然位于页面的正中间而不随页面的内容一起滚动。如果你觉得照片位于页面的正中间不满意，只需要调整以下代码中的“background-position"的值就可以了。代码如下：
type=text/css&&!--body
{background-image:url(你的背景图片地址);background-repeat:no-background-attachment:background-position:50%
50%}--& &/STYLE&
还可先用可视化编辑，把文字先编辑好大小、颜色、字体，再切换到html状态下，如果需要文字移动，就把这段文字代码粘贴到移动文字特效代码中。然后把移动文字的代码粘贴到图片背景特效代码中的显示文字中。一个带有移动文字的图片就做好了。
用HTML制作表格
用HTML制作表格：
表格以&table&和&/table&分别作起始标识符。其中，&table&里有一些必要的参数，为容易理解起见，黑马在这里只介绍本节用到的参数，其他的参数今后将陆续提到。border参数定义表格边框的粗细，记为border=数值，数值取0，1，2，3等整数。width是我们要定义的参数，它规定表格的宽度，数值通常用100%，记作width=100%，值得注意的是，如果不设置width值，表格将根据单元格里的内容自动定义宽度。height参数规范表格的高度，通常可以不设置，而是让内容的多少让系统自行设定。
&table&和&/table&之下，还需要由两个成对的标识符号定义表格的行、列，它们分别是&tr&……&/tr&，&td&……&/td&，tr标识符定义表中的行，td标识符定义数据表元，即每行中的每一列。&td&……&/td&要包含在&tr&……&/tr&里面。一张完整的表格全部语法如下：
&table border=2
width=80%&
Table&/td&
已投稿到：
以上网友发言只代表其个人观点，不代表新浪网的观点或立场。}