-1

我打算将图像添加到输入字段中，因此如果您单击该图像，则输入字段中的文本将清晰可见。

我打算使用绝对定位。我的问题是哪个 html 标签最适合这种情况？

这是我使用的代码。

<DOCTYPE html>
    <head>
        <title></title>
        <style>
            #search_form {
                width: 380px;
                height: 110px;
                position: relative;
                background: -webkit-gradient(linear, left top, left bottom, from(#43689a), to(#6399e7));

            }

            #search_form input {
                width: 300px;
                height: 30px;
                border-radius: 18px;
                border: 1px solid #ccc;
                margin-left: 70px;
                margin-top: 40px;
                padding-left: 36px;
            }

            #search_form input:focus {
                outline: none;
            }
            #search_form button {
                position: absolute;
                width: 16px;
                height: 16px;
                background: url(f.png) no-repeat 50% 50%;
                border: 0;
                top: 47px;
                left: 85px;
                cursor: hand;
                text-indent: -9999px;
            }

        </style>
    </head>
    <body>
        <div id="search_form">
            <form>
            <input type="text" placeholder="Search....">
            <button>Submit</button>
        </form>
        </div>
    </body>
</html>
4

2 回答 2

0

除了使用<img>标签之外，您还可以将图像放置在输入字段的背景中。

 #search_form input { background:url(../imagepath/image.jpg); }
于 2013-03-29T13:34:27.570 回答
0

<img>

通常，您会希望对大多数图像工作使用<img>标签。

<img src="blah.png" />

CSSbackground-image

你也可以使用一个普通的并在 CSS 中<div>设置它的规则。background-image

HTML

<div class="handsome-bg"></div>

CSS

.handsome-bg {
    background-image:url(blah.png);
}

哪一个？

两者都有优势和劣势，但一般都坚持<img>。例如，<img>更麻烦的事情是根据屏幕尺寸或密度选择不同的图像（我想在视网膜显示器上使用高分辨率图像）。

于 2013-03-29T13:35:36.980 回答