css - 将联系表包裹在背景图片周围

Question

如何在背景图像(例如桌面屏幕)周围包裹联系表单。如需进一步说明，请访问此 link .向下滚动到页面底部，您会看到一个 mac 屏幕背景包裹在登录页面内。

<div id="new_div_3">
        <form class="contact_form" action="#" method="post" name="contact_form">
            <ul>
                <li>
                    <h2>Contact Us</h2>
                    <span class="required_notification">* Denotes Required Field</span>
                </li>
                <li>
                    <label for="name">Name:</label>
                    <input type="text"  placeholder="John Doe" required />
                </li>
                <li>
                    <label for="email">Email:</label>
                    <input type="email" name="email" placeholder="john_doe@example.com" required />
                    <span class="form_hint">Proper format "name@something.com"</span>
                </li>
                <li>
                    <label for="website">Website:</label>
                    <input type="url" name="website" placeholder="http://johndoe.com" required pattern="(http|https)://.+"/>
                    <span class="form_hint">Proper format "http://someaddress.com"</span>
                </li>
                <li>
                    <label for="message">Message:</label>
                    <textarea name="message" cols="40" rows="6" required ></textarea>
                </li>
                <li>
                    <button class="submit" type="submit">Submit Form</button>
                </li>
            </ul>
        </form>
    </div>

这是我目前在 new_div_3 中的内容。

#new_div_3 {
    margin:0 auto;
    width: 500px;
    background:#ECF0F1 url('img/email-screen.png') 0 0 no-repeat;
    background-size: 1040px 878px;
    padding: 38px 38px 267px;
}

有没有一种方法可以使背景正确显示在 div 的中心，同时联系表也出现在中心？

Answer 1

我认为您正在寻找类似的东西:

background:#ECF0F1 url('img/email-screen.png') no-repeat center center;

如果您使用的是 firefox 或 chrome，则可以使用 inspect element 查看您提供的示例中它是如何设置的。