文本框添加背景图的各种问题

最新推荐文章于 2021-04-11 22:32:28 发布
最新推荐文章于 2021-04-11 22:32:28 发布
阅读量598 收藏
点赞数
分类专栏： HTML CSS 文章标签： border url class input stylesheet function
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/dandelion_b/article/details/6155240
版权

1. IE浏览器
2. 文本输入框，且设置了背景图片
3. 文本框文字超过其宽度
4. 光标位于超过文本框宽度的文字后

5.input背景图随着文本超出而左移，如何固定背景？ 

 

6.

.sc_sou_zb{ width:121px; height:24px; line-height:24px; background:url(shangc/sc_13.jpg) no-repeat; border:none; padding-left:10px;}

 

<input name="imageField" type="submit" value="" class="sc_sou_zb" style="cursor:hand" />

 

改动鼠标箭头的样式

cursor:hand

 

7

 

参考网页：

http://www.itref.cn/a/css/2010/0623/62.html

 

http://hi.baidu.com/iadong/blog/item/60067a61062e2cd78db10da3.html

 

http://growinghome.webicn.com

 

 

<!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-Type" content="text/html; charset=gb2312" />
<title></title>
<style type="text/css">
<!--
/*body {
 background-image: url(image/bg.jpg);
 }
 .us_Submit_text {
 border:medium none;
 cursor:pointer;
 height:30px;
 width:132px;
 background-attachment: scroll;
 background-color: transparent;
 background-image: url(image/cxbg.jpg);
 background-repeat: repeat;
 background-position: 0 0;
}

.us_Submit_tj {
 border:medium none;
 cursor:pointer;
 height:30px;
 width:101px;
 background-attachment: scroll;
 background-color: transparent;
 background-image: url(image/ssan.jpg);
 background-repeat: repeat;
 background-position: 0 0;
}*/
-->
</style>
<style type="text/css">

.ner{font:normal 12px/22px "宋体"; color:#000000;}
ul,li{
margin:0px;
padding:0px;
}
li{
padding:0 1px;
font:normal 12px/22px "宋体"; color:#FFFFFF;
display:inline;
line-height:22px;
width:78px;
list-style:none;
list-style-position:outside;
text-align:center;
font-weight:bold;
float:left;
}
a{
 color:#FFFFFF;
 text-decoration:none;
 float:none;
 width:110px;
 height: 25px;
 font-weight: normal;
 padding: 0px;
 text-align:center;
}

a:hover{
 color:#CCFFCC;
 float:none;
 width:110px;
 text-decoration:none;
 padding: 0px;
 height: 25px;
 background-color: #009900;
}
.fo {
 font-size: 12px;
 line-height: 20px;
 color: #FFFFFF;
}

#nav{
 width:800px;
 height:30px;
 border-bottom:0px;
 padding:0px 5px;
 position:absolute;
 z-index:1;
 top: 85px;
 visibility: visible;
}
.list{
line-height:25px;
width:110px;
text-align:center;
padding:0px;
font-weight:normal;
}
.menu1{
 width:110px;
 height:auto;
 color:#FFFFFF;
 cursor:hand;
 overflow-y:hidden;
 margin: 0px;
 padding: 0px;
 font-weight: normal;
 line-height:25px;
 border-top-width: 0px;
 border-right-width: 1px;
 border-bottom-width: 0px;
 border-left-width: 0px;
 border-top-style: dashed;
 border-right-style: dashed;
 border-bottom-style: dashed;
 border-left-style: dashed;
 border-top-color: #666666;
 border-right-color: #FFFFFF;
 border-bottom-color: #666666;
 border-left-color: #666666;
 background-image: url(image/nh.jpg);
}
</style>
<!--
body {
 background-image: url(image/bg.jpg);
}
-->
</style>
<link href="css.css" rel="stylesheet" type="text/css" />
<script type="text/JavaScript">
<!--
function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}

function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>
<style type="text/css">
<!--
.fo41 {font-size: 12px;
 color: #009900;
 text-decoration: none;
}
.list {line-height:25px;
width:110px;
text-align:center;
padding:0px;
font-weight:normal;
}
.menu2 {
 width:110px;
 height:25px;
 line-height:25px;
 color:#FFFFFF;
 overflow-y:hidden;
 cursor:hand;
 margin: 0px;
 padding: 0px;
 font-weight: normal;
 background-repeat: repeat;
 border-right-width: 1px;
 border-right-style: dashed;
 border-right-color: #FFFFFF;
 border-left-width: 1px;
 border-left-style: none;
 border-left-color: #FFFFFF;
}
#nav {
 width:970px;
 height:30px;
 border-bottom:0px;
 padding:0px 5px;
 position:absolute;
 z-index:1;
 top: 215px;
 visibility: visible;
 left: 38px;
}
body {
 background-image: url(image/bg.jpg);
}

.us_Submit_text {
 border:medium none;
 cursor:pointer;
 height:36px;
 width:132px;
 background-attachment: scroll;
 background-color: transparent;
 background-image: url(image/cxbg.jpg);
 background-repeat: repeat;
 background-position: 0 0;
 text-align:center;
 
 
}
.us_Submit_text1 {
 border:medium none;
 cursor:pointer;
 /*height:36px;*/
 width:132px;
 background-attachment: scroll;
 background-color: transparent;

 background-repeat: repeat;
 background-position: 0 0;
 text-align:center;
 
 
}

.us_Submit_tj {
 border:medium none;
 cursor:pointer;
 height:36px;
 width:101px;
 background-attachment: scroll;
 background-color: transparent;
 background-image: url(image/ssan.jpg);
 background-repeat: repeat;
 background-position: 0 0;
}
-->
</style>
</head>

<body οnlοad="MM_preloadImages('image/more1.jpg')">
<table width="963" border="0" align="center" cellpadding="0" cellspacing="0">
  <tr>
    <td height="45">&nbsp;</td>
    <td width="272"><div align="center">
      <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"

codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="272" height="203">
        <param name="movie" value="logo.swf" />
        <param name="quality" value="high" />
        <param name="wmode" value="transparent" />
        <embed src="logo.swf" width="272" height="203" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-

shockwave-flash" wmode="transparent"></embed>
      </object>
    </div></td>
    <td width="345" valign="bottom"><table width="100%" border="0" cellspacing="0" cellpadding="0">
      <tr>
        <td height="50">
        <form method="post" action="so_zb.asp" target="_top">
        <table width="345" border="0" cellspacing="0" cellpadding="0">
          <tr>
            <td width="81"><img src="image/xwss.jpg" width="81" height="36" /></td>
                        <td width="132" height="50" align="center" valign="middle">
                            <div class="us_Submit_text" align="center">
                              <table width="132" border="0" height="100%">
               
                                <tr>
                                  <td align="center" valign="middle" ><input type="text" name="word"  height="12" style="vertical-

align:middle"class="us_Submit_text1" /></td>
                                </tr>
                              </table>
                 
                            </div>
          </td>
            <td><!--<img src="image/ssan.jpg" width="101" height="36"  />-->
            <input type="submit" value="" name="B1" class="us_Submit_tj">
            </td>
          </tr>
        </table></form>
        </td>
      </tr>
    </table></td>
  </tr>
</table>
<table width="963" border="0" align="center" cellpadding="0" cellspacing="0">
  <tr>
    <td height="15">&nbsp;</td>
  </tr>
</table></body>

 

 

用这个还不错 把td设置背景色 把input的边框设置为透明的，没有边框

.sousuo {
 background: url("") no-repeat scroll 0 0 transparent;
 border: medium none;
 height: 29px;
 line-height: 29px;
 padding: 3px 0 0 15px;
 width: 114px;
 text-align: center;
}

 

.us_Submit_text {
 border:medium none;
 cursor:pointer;
 height:29px;
 width:76px;
 background-attachment: scroll;
 background-color: transparent;
 background-image: url(image/button.jpg);
 background-repeat: repeat;
 background-position: 0 0;
 text-align: center;
}


  <td height="29" background="image/ssback.jpg"><input type="text" class="sousuo" value="" id="word" name="word"></td>

<input type="submit" value=""  class="us_Submit_text">

 

dandelion_b
关注
专栏目录
【模仿案例】input插入透明背景图并设置背景色
Weiqian_的博客
04-11 2714
一、实现效果 二、分析需求： 1.圆角矩形文本框 2.左侧有一个搜索的小logo 3.内置有emoji和文字 三、实现思路 1.采用子绝父相定位 如果想将元素定位在一个具体的范围之内，又想让这个元素的位置可以随意调整，可以使用子绝父相（参考网址：关于CSS中的定位使用子绝父相（子类绝对位置和父类相对位置）） 因为input内不能直接插入img，用背景图片的形式比较难调整css样式（个人想法），所以这里采用子绝父相的遮眼法把搜索logo置入input之中，后面也方便调整样式 <d
引用文本框添加背景图片,背景透明,文字渲染
浤济的专栏
04-01 359
引用文本框添加背景图片,背景透明,文字渲染: public class DataGridView背景 : DataGridView { protected override void PaintBackground(Graphics 绘图画面, Rectangle 绘制背景, Rectangle 绘制区域) { ...
css input 背景图片
Fbote
06-21 576
[code="java"] inputbgimage{/*border:none;*/ margin:0; padding:0; border:1px solid #A4BED4; background:url('${pageContext.request.contextPath}/insert/edit.jpg') right top no-repea...
一个input框如何设置两张背景图片一左一右，移动端 、小程序如何给input 框设置两张背景图片
weixin_44012027的博客
04-11 1673
如何给input 框同时设立两张背景图片？ 在前端开发中我们经常会遇到这种需求：给一个输入框同时设置两张背景图片。如下就是一个很典型的场景。 实现的方式有很多种，这里简单介绍一下如何利用简单的css 样式来实现。 <!-- 其他的标签我就屏蔽掉了，这里只列举密码这个input 框 的html --> <input class="password logInInput" password="" placeholder="password" /> <!-- 样式 --
input里面添加图片
热门推荐
heromps的博客
01-13 2万+
input里面添加图片 思路：利用input背景图片来实现，主要使用的是css样background-image l利用background-image引入图片，background-image: url(/images/teststair/7-日历.png); 利用background-repeat去除背景图片重复， background-repeat: no-repeat; 利用background-position来设置图片位置， background-position: 80px; 具体实现：
文本框输入，背景框去除，输入类型，输入字数限制
小花猫哒小栗子
07-31 163
<input class="name-pc" id="Name" onkeyup="checkLength(this, 15);" οnkeyup="value=value.replace(/[^\u4E00-\u9FA5]/g,'')" placeholder=""/> if(/\D/.test(str)) { alert('只能输入数字'); document....
CSS为指定的input文本框添加背景
09-25
当我们想要为特定的`<input>`文本框添加背景时，可以利用CSS的`background-image`属性来实现。这个属性允许我们将图像设置为元素的背景，从而增加界面的美观度和用户体验。 以下是一个关于如何为`<input>`文本框...
javagui为文本框添加背景图片
最新发布
05-22
可以通过在JTextField的paintComponent方法中绘制背景图片来为文本框添加背景图片。以下是一个简单的示例代码： ```java import java.awt.Graphics; import java.awt.Image; import javax.swing.ImageIcon; import ...
VB6给文本框添加背景图片
10-16
在VB6（Visual Basic 6.0）编程环境中，为文本框（TextBox）添加背景图片是一种常见的美化界面的方法。这个项目提供了一种解决方案，通过自定义控件和一些辅助类来实现这一功能。以下是相关知识点的详细说明： 1. *...
JavaScript实现文本框中默认显示背景图片在获得焦点后消失的方法
10-24
在编写网页时，我们经常会遇到需要给输入框添加美观的背景图片来吸引用户的情况。然而，当用户开始输入内容时，背景图片可能会干扰到用户的输入体验。因此，将输入框的背景图片在文本框获得焦点时消失，并在失去焦点...
html中文本框加背景图片
系统运维
09-21 2863
&lt;inputtype="text"style="background-color:#ccc;color:yellow;font-size:11pt"&gt; &lt;inputtype="text"style="background-image:url('banner.jpg')"&gt; &lt;input type="text" id=
input输入框载入背景图片
caneli的博客
08-19 1万+
做第一个input输入框，载入背景图片的时候遇到输入框坍缩，只有一个背景图片大小。如下： input输入框设置了宽高也无法解决。 解决方法： 多设置一个div来存放背景图片，并设置绝对定位。 同样，今天做二级导航，加载背景图片后，就只有图片，背景颜色消失，目前还不知道原因，先记着，以后学懂了再来修改。
css对textbox加背景图片与color
08-13 1826
DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >HTML>    HEAD>        title>testtxtboxtitle>        meta name="GENERATOR" Content="Microsoft Visual Studio .NET 7.1">        meta name="C
给文本框添加背景图片
FighterLiu的专栏
11-02 833
http://images.51job.com/im/my_history/key_search.gif); background-repeat: no-repeat; line-height: 21px; padding-left: 24px;cursor:hand" id="keyword" name="keyword" autocomplete="off" key="iCom1" vin
如何让文本框背景色透明
Code
01-30 1万+
如何设置html表单里text文本框是透明的  background: none transparent scroll repeat 0% 0%;
chrome自动填表会遮挡input中背景图的问题解决方法
Apollo47的专栏
09-09 4549
在做某项目登录界面时，发现用户密码框在Chrome自动填充时，input中的背景框会被遮住。网上也搜了一下，没有一个有效的解决方法。 来看csdn的登录界面，也有这个问题。 后来在浏览网页时，无意中发现某网站的登录页面没有这个问题，于是分析了下它的css，照着试了一下，真的完美解决。我做的效果： 原理很简单，下面一个 div，上面放 div(显示图片) + inp
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值