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×27场（左侧和右侧的10个填充以及另一个类的顶部和底部的另外1个）并重复背景图像。它按照我之前想要的方式工作，背景不重复，直到最近我将doctype html 4.01过渡到我的代码中。这是我的意思的视觉链接： 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: 0 10px;

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

1 个答案: