css - 将搜索框插入标题图像

Question

我希望将我的搜索栏插入/移动到我的标题图像中，类似于下面的示例。如果有人有时间告诉我如何做到这一点，将不胜感激。谢谢你的时间。这是我网站的链接http://www.jobspark.ca/

克里斯

Answer 1

您可以将背景图像保留在 body 标记中。设置不重复，使用背景大小为 100% 宽度。

 example:

    body{
           backgroud-image:url() no-repeat center;
           background-size: --;
         }
      HTML STRUCTURE:



 <div id="header">
        <div ="#"> 
           <h1></h1> //float:left
           <div id="menu"></div> //float:right;

         </div>

        <div ="search-box">
             <form>

             </form> //use margin and padding for keep it center;
        </div>

     </div>

Answer 2

只需在里面添加您的搜索框

<div id="logo" class="image">
    ...
    <h1>
      ...
    </h1>
    "search box code goes here"
</div>

在搜索 div 中提供一个 id，并使用 CSS 填充来确定最终位置。