Question

也许这是一个简单的问题，但我已经搜索了很长时间但没有运气。我只需要将图像用作输入type=text，而不是像平常一样使用白盒子。我尝试使用background-image，但是白色仍在那里，只有它有背景图像。我不需要白盒子。我怎么能这样做？

Answer 1

像这样：

<强> HTML

<label for="test">Label here</label> 
<input type="text" name="test" id="test" placeholder="placeholder text" />

<强> CSS

input[type=text] {
    background:url(http://placekitten.com/200/200) no-repeat 0 0; 
    border:0 none; 
    padding:4px 10px;
    color:#fff;
}

<强> JSFiddle Demo

Answer 2

这就是你要追求的吗？

http://jsfiddle.net/HU8EE/

HTML

<div class="image">Text text text text text text text</div>

CSS

.image {
    width:400px;
    height:200px;
    background-image:url(http://3.bp.blogspot.com/-HX2iaDPwkhs/T6IEBoiufuI/AAAAAAAAAyQ/dtC9Sr268_k/s1600/doodle-525-cloud.jpg);
}

Answer 3

如果我理解正确，这可能是一个解决方案。将背景图像应用于文本输入字段：fiddle

HTML：

<textarea rows="10" cols="10" class="input">default text</textarea>

的CSS：

.input {
  background-image: url(http://www.placehold.it/10x10);
}

使用图像作为输入文本

3 个答案: