0

谁能给我看一个代码片段，它产生类似于这个例子中的“搜索框”：www.dx.com？

令我惊讶的是，谷歌搜索“图像内的文本字段”只给了我“文本字段内的图像”的所有结果。

4

2 回答 2

4

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

使用 acss作为：

<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;}
于 2012-10-10T00:35:12.883 回答
0

正如其他答案指出的那样，您正在寻找的方法无效。您实际上是将文本字段分层放在图像之上，并隐藏字段的边框和背景，因此唯一可见的是图像。

他们使用绝对定位将文本字段和按钮设置在图像顶部，移除边框和背景，使元素基本上不可见，显示其背后的图像。这是一个简单的例子。 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 是容器，它有一个 367px 宽和 36px 高的背景图像。所以我们将它设置为相对位置，这样我们就可以绝对定位孩子。

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

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

于 2012-10-10T00:43:39.117 回答