我有两张图片:
http://oi62.tinypic.com/xpwpwl.jpg http://i59.tinypic.com/b7hocy.jpg
我需要使用image1作为背景,并且我需要将image2放在我的简报输入表单的背景中。
直到现在我发现这样做的方法是将第一个图像作为背景,将secound作为另一个背景,它运行良好,但在某些分辨率下,image2(inputbackground)移动到不同的地方,我希望保持这种状态在几乎所有分辨率的相同位置。
这是我的代码:
HTML:
<div class="bgall">
<div class="inputcontainer">
<label>
<input type="text" placeholder="Type your email" />
</label>
</div>
</div>
CSS:
.bgall {
background-image: url('../img/image1.jpg');
background-repeat: no-repeat;
background-position: center top;
background-size: contain;
height:564px;
max-width: 100%;
margin-bottom: 30px;
}
.inputcontainer {
background-image: url('../img/image2.jpg');
background-repeat: no-repeat;
background-position: center top;
background-size: contain;
margin-top: 25%;
margin-right: 19.5%;
width: 250px;
height: 93px;
float: right;
}
label {
padding-left: 24px;
padding-top: 60px;
position: absolute;
}
答案 0 :(得分:1)
您很可能需要将.inputcontainer
内的保证金的相对值更改为绝对值。
margin-top: 25%;
margin-right: 19.5%;
类似
margin-top: 250px;
margin-right: 195px;
或适合您图像的值。