Question

我想把我的形象放在我的形式背后，但我无法做到我希望有人可以帮我解决这个问题，因为这看起来很糟糕。

这些是mij代码：

        <div id ="content">
                <form>
                    <table>
                        <tr>
                            <td>
                                Gebruikersnaam
                            </td>
                            <td>
                                <input type ="text"/>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                Paswoord
                            </td>
                            <td>
                                <input type ="password"/>
                            </td>
                        </tr>
                    </table>
                </form> 
            </div> 


    #content {
        clear: both;
        margin: 0 auto;
        width: 50%;
        background-image:url('login.png');
        background-repeat:no-repeat;
        min-height: 461px;
      }

您可以在此处找到example。

Answer 1

请看这个例子：http://jsfiddle.net/FdUgp/

#content {
        clear: both;
        margin: 0 auto;
        width: 400px;
        background-color: red;
        background-repeat:no-repeat;
        min-height: 300px;
        text-align: center;
      }
#content form {
    text-align: left;
    display: inline-block;
    margin-top: 100px;
}

将#content的宽度和高度与图像的大小完全相同，然后更改表单的margin-top以匹配您想要的位置。

如果你想要一些响应，这有点棘手。看看小提琴：http://jsfiddle.net/FdUgp/2/

要点是：

background-size：使用#content调整图片大小。
：在伪元素之前使#content的高度响应。
表格的相对/绝对定位。
text-align：center和display：inline-block移动到表单/表而不是内容/表单。

Answer 2

尝试背景位置：中心顶部;或背景位置：顶部;

Answer 3

您可以使用#content上的填充值来向左和向下推送表单。

我还会考虑删除表格元素，布局使用表格永远不会很好。有更好的一致性和灵活性的方法来实现同样的目标。

此外，尝试发布实时示例或JSfiddle，以便人们可以看到您的代码正在运行。

如何在表单背面获取图像

3 个答案: