Question

我有两张图片：

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;
}

Answer 1

您很可能需要将.inputcontainer内的保证金的相对值更改为绝对值。

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

类似

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

或适合您图像的值。

在背景里面的背景 - css

1 个答案: