html - 在输入文本字段上重复图像背景

Question

我有一个搜索栏，它使用 200 x 25 像素的背景图像，使用以下 css 类

.searchBar{
    border-style: hidden;
    border-width: 0px;
    color: #FFFFFF;
    padding-left: 10px;
    padding-right: 10px;
    font-size:1em;
    background-image: url(images/searchBox2.gif);
    font-family: "calibri", "helvetica", sans-serif;
    margin-left:1%;
    width: 200px;
    height: 25px;
    outline: 0 none;
    vertical-align: middle;
    }

出于某种原因，它将元素扩展到 220 x 27 的字段(在另一个类中，左侧和右侧的填充为 10，顶部和底部分别为 1 px)并且重复背景图像。它按照我之前想要的方式工作，背景没有重复，直到我最近将 doctype html 4.01 transitional 添加到我的代码中。这是我的意思的视觉链接: Picture of Search Bar before and after

Answer 1

内边距加起来等于元素的总宽度。查看示例以了解如何获得相同的结果。

没有填充

.searchbar {
    width: 200px;
}

有填充

.searchbar {
    width: 180px;
    padding: 0 10px; 
}

为了避免重复背景使用background-repeat:no-repeat;

这是您的完整解决方案

.searchBar{
    border-style: hidden;
    border-width: 0px;
    color: #FFFFFF;
    padding-left: 10px;
    padding-right: 10px;
    font-size:1em;
    background-image: url(images/searchBox2.gif);
    background-repeat: no-repeat;
    font-family: "calibri", "helvetica", sans-serif;
    margin-left:1%;
    width: 180px;
    height: 25px;
    outline: 0 none;
    vertical-align: middle;
    }

您还可以使用速记背景来合并您的背景样式

background: url(images/searchBox2.gif) no-repeat;

你也可以使用速记padding来合并padding-left和right

padding: 0 10px;