CSS新手背景图像输入

Question

我有一个图像和多个图标的数组16x16。如。"http://www.freepbx.org/v3/browser/trunk/assets/css/jquery/vader/images/ui-icons_cd0a0a_256x240.png?rev=1"

你知道如何选择其中一个图标并使用CSS将其设置为背景图像吗?

我想要实现的是在输入文本元素的右侧有一个x图标或勾号图标，以通知用户他所给出的输入是有效的还是无效的。

谢谢,达沃

Answer 1

你可以将元素的高度设置为你想要的图像中图标的高度，然后设置该元素的背景，如下所示:

span {
    background:url(path/to/image) 50px 10px;
    height:10px;
    width:10px;
}

其中使用的元素是span，所需的图标位于(50px, 10px)的位置。要了解更多关于定位背景的信息，请访问:http://www.w3schools.com/cssref/pr_background-position.asp

Answer 2

您可以使用css完成此操作，如下所示:

div#myDiv {
    background-image:url('url-to-image');
    background-position:50px 50px; /* coordinates of the top left corner of the image portion you want to display */
    width:20px; /* Width of image portion */
    height:20px; /* Height of image portion */
}