将<input />框放置在png

时间:2018-10-06 00:47:55

标签: html css html5 css3

我已经四处搜寻,找不到类似的问题。我正在着陆页上工作,希望有一个背景,在背景上方有一个灯泡(png或图标),然后在螺丝上有一个输入框(灯泡的底部)。问题是我很难将灯泡定位在墙纸的中心,然后将盒子定位在灯泡的底部。该框使用户可以输入其邮政编码。我相信必须将灯泡设置为绝对值,将框设置为相对值,以便它可以根据屏幕尺寸移动。任何帮助表示赞赏。

示例图片在这里:

enter image description here

<header>
        <nav>
            <div class="row">
                <img src="contents/logo.png" alt="" class="logo">
                <ul class="main-nav">
                    <li><a href="#">Home</a></li>
                    <li><a href="#">Services</a></li>
                    <li><a href="#">Contact</a></li>
                    <li><a href="#">About</a></li>
                </ul>
            </div>
        </nav>
        <div class="hero-text-box">
            <i class="ion-lightbulb icon-big"></i>
            <form onSubmit="return process();">
                <input type="text" name="url" id="url" placeholder="ZIP Code">
                <input type="submit" value="Submit">
            </form>
        </div>
    </header>

CSS

* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

html {
background-color: #fff;
text-color: black;
font-family: 'Quicksand', 'sans-serif';
font-weight: 300;
font-size: 20px;
text-rendering: optimizeLegibility;
color: #fff;
}

.row {
max-width: 1140px;
margin: 0 auto;
}

section {
padding: 80px 0;
}

.icon-big {
font-size: 2000%;
color: #2ecc71;
margin-bottom: 10px;
}

header {
background-image: linear-gradient(rgba(0, 0, 0, .8), rgba(0, 0, 0, .8)), 
url(../contents/landing.jpg);
background-size: cover;
background-position: center;
/*makes cover fit to top of viewport*/
height: 100vh;
}

.hero-text-box {
position: absolute;
width: 1140px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}

.logo {
height: 70px;
width: auto;
float: left;
margin-top: 20px;
}

这是到目前为止的样子:

enter image description here

1 个答案:

答案 0 :(得分:0)

Try this one. Just add the icon at the top of the form.

*{
  margin:0;
}



header {
background-image: linear-gradient(rgba(0, 0, 0, .8), rgba(0, 0, 0, .8)), 
url(data:image/jpeg;base64,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);
background-size: cover;
background-position: center;
/*makes cover fit to top of viewport*/
height: 100vh;
}


.hero-text-box{
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}
<header>
        
        <div class="hero-text-box">
            

            <form onSubmit="return process();">
                <input type="text" name="url" id="url" placeholder="ZIP Code">
                <input type="submit" value="Submit">
            </form>
        </div>
  
    </header>