我正在尝试重新创建 google 主页的界面(当然减去功能)。我使用 CSS 中的 background-image
将小麦克风图片插入到搜索栏中。但是当我这样做时,边框的顶部明显变暗,并且我无法在编辑类时更改颜色。
我对使用 background-image
属性还很陌生,所以我可能忽略了一些明显的东西。这是相关代码的片段。
CSS
.searchBar{
width:700px;
height:40px;
font-family: arial,sans-serif;
font-size:18px;
background-image:url(googleMic.png);
background-repeat: no-repeat;
background-position: 670px 9px;
background-size: 2.5%;
}
HTML
<center>
<img class="googleImg" src="googleLogo.png" alt="google logo">
<div>
<input class="searchBar" type="text" name="searchBar">
</div>
<span>Google Search</span>
<span>I'm Feeling Lucky</span>
</center>
最佳答案
你总是可以添加 border: 1px solid;
到你的 .searchBar
CSS 样式:
.searchBar {
width:700px;
height:40px;
font-family: arial,sans-serif;
font-size:18px;
background-image:url(googleMic.png);
background-repeat: no-repeat;
background-position: 670px 9px;
background-size: 2.5%;
border: 1px solid;
}
<center>
<img class="googleImg" src="googleLogo.png" alt="google logo">
<div>
<input class="searchBar" type="text" name="searchBar">
</div>
<span>Google Search</span>
<span>I'm Feeling Lucky</span>
</center>
关于html - 元素中使用背景图片时,input 的上边框变黑;我怎样才能关闭?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42870346/