html输入与背景图像 [英] html input with background image

问题描述

你好，我已经在我的输入文本和文本区域设置了背景图像，但我有很少的问题

我有附加的图像。
如何在名称文本输入中更改文本开始位置？

我的文本区域大于我的背景图片

这是我的名字文本输入与风格

  input type =textname =txtName class =input/> 
 
 .input 
 {
 border：0px solid＃444444; 
 height：39px; 
 width：346px; 
 background：url（images / Contact_05.jpg）no-repeat right top; 
 color：#fff; 
 padding-left：4px; 
 font-size：20px; 
} 
  

这里是我的文字区域

 < textarea rows =5cols =0class =inputMessage>< / textarea> 
 .inputMessage 
 {
 border：0px solid＃444444; 
 height：386px; 
 width：685px; 
 background：url（images / Contact_20.jpg）no-repeat left top; 
 padding-left：4px; 
 color：#fff; 
 font-size：20px; resize：none; 
} 
  

有任何建议吗？

解决方案<

当你设计你的表单时，它会被添加到你的输入框中。在输入之间放置一个临时边框，看看它们实际放置的位置是好的，当你完成后只需取消它。

Hello guys i have set background image on my input text and text area but i have few little problems

I have attached image. How i can change text start up position in Name text input?

and my text area is bigger then my background image

this is my Name text input with style

input type="text" name="txtName" class="input" />

.input
{
    border: 0px solid #444444;
    height:39px;
    width:346px;
    background:url(images/Contact_05.jpg) no-repeat right top; 
    color:#fff; 
    padding-left:4px; 
    font-size:20px;
    }

and here is my text area

<textarea rows="5" cols="0" class="inputMessage"></textarea>
.inputMessage
{
    border:0px solid #444444;  
    height:386px; 
    width:685px;
    background:url(images/Contact_20.jpg) no-repeat left top; 
    padding-left:4px; 
    color:#fff; 
    font-size:20px; resize:none;
    }

any advice?

解决方案

Set the padding-left to a greater value on your inputs, and decrease the width of your textarea.

When you're designing your form it would be good to put a temporary border around your inputs to see where they are actually positioned, and when you're done just take it off.

这篇关于html输入与背景图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！