我有一个搜索栏,它使用 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
最佳答案
内边距加起来等于元素的总宽度。查看示例以了解如何获得相同的结果。
没有填充
.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;
关于html - 在输入文本字段上重复图像背景,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/5323923/