html - 背景里面的背景 - css

Question

我有两张图片:

http://oi62.tinypic.com/xpwpwl.jpg http://i59.tinypic.com/b7hocy.jpg

我需要使用 image1 作为背景，我想在它上面放置 image2，它将成为我的时事通讯输入表单的背景。

到目前为止，我发现的方法是将第一张图片作为背景，将第二张图片作为另一个背景，效果很好，但在某些分辨率下，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;
}

Answer 1

您很可能需要将 .inputcontainer 中的 margin 的相对值更改为绝对值。

margin-top: 25%;
margin-right: 19.5%;

类似于

margin-top: 250px;
margin-right: 195px;

或适合您图像的值。