在输入文本字段中显示背景图像

Question

我有一个带背景图片的简单HTML页面，现在我在这个HTML页面上应用了一个联系表单。

我想在文本输入字段中显示背景图像，即我想使输入文本字段透明。我使用CSS代码background-color:transparent;，但它不起作用。我正在为输入文本字段获取白色背景。

Answer 1

试试这个

.contact
{
    background: url(https://www.gravatar.com/avatar/ba03773d5fe4b970a7d7fb57a112e932?s=32&d=identicon&r=PG) no-repeat right center;
    height:100px;
    width:200px;
    padding:10px;
}
.contact input[type="text"]
{
    background:rgba(0,0,0,0);
    border:1px solid #fff;
    color:#fff;
}

http://jsfiddle.net/2ZmFA/

Answer 2

这是关于Fiddle：

input[type="text"]
{
    background: transparent;
}

，如果你想要border: none;

，可以使用边框

以下是Fiddle

所以你的问题必须在代码的另一个地方。添加更多代码，我将更新我的答案;）

Answer 3

<input type="text" class="textInput"/>

CSS：

.textInput {
 background: transparent;
 background-image: url(Images/textBg.jpg)
}

Answer 4

您可以将背景颜色设置为透明。

background-color: rbga(0,0,0,0);

或者在css3中，您可以设置整个元素的不透明度：

opacity: 0;