重复图像背景

Question

我有一个使用的背景图像这200通过使用以下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; 
    } 

出于某种原因，25像素搜索栏，它延伸通过所述元件的220 27字段（左侧和右侧的10个填充以及另一个类的顶部和底部的另一个1个填充）并且重复背景图像。它以我想要的方式工作，直到我最近在我的代码中添加了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: 0 10px;