Question

有人能告诉我一个代码片段，它产生的“搜索框”与本例中的搜索框类似：www.dx.com？

谷歌搜索“文字内部图片”只给了我“文本内部图像”的所有结果，这让我感到惊讶。

Answer 1

您不能将图像放入其他元素内，但您可以执行以下操作来实现此效果：

使用css作为：

<style>
    .search-container{background:url(your/image/path) no-repeat top left;width:200px;height:50px;}
    .search-container input{width:150px;}
    .search-container button{width:40px;}
</style>

html喜欢：

<html>
    <head></head>
    <body>
        <div class="search-container">
            <input type="text" /> <button>Search</button>
        </div>
    </body>
</html>

现在，search-container将带有背景图片，在里面您可以放置搜索表单（输入和按钮）。

如果你想要没有“默认”风格的输入你可以重置：

.search-container input{border:none;background:transparent;}

Answer 2

正如其他答案所指出的那样，您所寻求的方法无效。您实际上是将图像顶部的文本字段分层，并隐藏字段的边框和背景，以便唯一可见的是图像。

他们使用绝对定位来设置图像顶部的文本字段和按钮，删除边框和背景，使元素基本上不可见，显示其背后的图像。这是一个简单例子的小提琴。 http://jsfiddle.net/a2pQ2/2/

这是html

<div class="searchbox">
    <input type="text" class="search" id="search" value="Search in 80,000+ Gadgets...">
    <button id="btnSearch" type="button" class="btn_search"></button>
</div>

和css

.searchbox {
    position: relative;
    width: 367px;
    height: 36px;
    background: url(http://tctel.com/search.jpg) no-repeat;
}
.searchbox .search
{
    border: none;
    position: absolute;
    top: 6px;
    left: 6px;
    height: 24px;
    line-height: 24px;
    width: 287px;
    outline: none;
}
.searchbox .btn_search
{
    border: none;
    position: absolute;
    top: 2px;
    right: 2px;
    height: 32px;
    width: 71px;
    background: transparent;
    cursor: pointer;
}

所以searchbox是容器，它的背景图像宽367像素，高36像素。所以我们将它设置为相对位置，这样我们就可以绝对定位孩子了。

.search是文本字段。它被设置为绝对位置，我将它从顶部和左侧设置为6像素以匹配图像的边框，出于同样的原因将高度设置为24。我隐藏了边界并勾勒出来。

.btn_search是按钮，我只是将它放在右边，隐藏边框，使背景透明，并在鼠标悬停时更改光标。

如何将文本字段放在图像中？

2 个答案: