Question

我可以使用所有帮助，根据我在此页面上的鹰精灵使我的联系表单响应：http://demo.chilipress.com/epic3/ 这个想法是在屏幕调整大小的同时让鹰的嘴巴在表格上。如您所见，精灵完全响应，形式也是如此。然而，在调整大小时，形状不会粘在鹰的嘴上。

HTML：

       <section id="two" class="window">
        <img src="assets/contact.jpg" alt="background image">
        <div id="sprite1_contact"></div>
        <div id="sprite2_contact"></div>
        <div id="content">
            <div class="contact">
                <form>
                <fieldset class="name group">
                    <label for="name" class="name">Name</label>
                    <input id="name" name="name" required aria-required=”true” pattern="[A-Za-z-0-9]+\s[A-Za-z]+"  title="firstname lastname"/>
                </fieldset>
                <fieldset class="email group">
                    <label for="email" class="email">Email</label>
                    <input type="email" id="email" name="email" required title="Submit a valid Email">
                </fieldset>
                <fieldset class="phone group">
                    <label for="phone" class="phone">Telephone</label>
                    <input type="tel" id="phone" name="phone" pattern="(\+?\d[- .]*){7,17}" required title="Submit an international, national or local phone number"/>
                </fieldset>
                <fieldset class="message group">
                    <label class="message">Message</label>
                    <input type="text" id="message" required/>
                </fieldset>
                <fieldset class="send group">
                    <input type="submit" value="Send" class="sendButton">
                </fieldset>
                </form>
            </div>
        </div>  
    </section>

CSS

#sprite1_contact{
background-image: url('sprite_contact2.png');
width: 35.2%;
height: 0;
padding-bottom: 7%;
background-position: 0 0;
background-size: 100%;
display: block;
top: 0;
position: absolute;
margin: 0 0 0 32.3%;
z-index: 2;}

#sprite2_contact {
background-image: url('sprite_contact2.png');
width: 27.5%;
height: 0;
padding-bottom: 29%;
background-position: 0 27%;
background-size: 100%;
display: block;
top: 0;
position: absolute;
margin: 0 0 0 35.8%;
z-index: 1;}

#content{
max-width: 50.694%;
position: absolute;
bottom: 0;
background: none repeat scroll 0 0 rgba(0, 0, 0, .55);
border-radius: 13px;
width: 678px;
margin: 0 0 7.6% 25.9167%;
box-shadow: 0 0 0 2px #000000, 2px 2px 30px 1px rgba(199, 255, 100, 0.73);}

.contact{
width: 100%;
margin: 10px;}

fieldset{
border: 0;
margin: 0;
width: 100%;
padding: 1%;}

.name, .email, .message{
padding-right: 29px;}

label{
color: #d8d9de;
font-family:'apple_chancerychancery';
font-size: 1.2em;
padding-left: 10px;}

input{
margin-right: 50px;
padding: 5px;
text-align: left;
border-radius: 10px;
background: none repeat scroll 0 0 rgba(255, 240, 260, 0.5);}

#name, #email, #phone, #message{
float: right;  
color: #253c93;
text-decoration: none;
border: 1px dotted #29FF00;
font-family: 'Calibri', Arial, sans-serif;
font-size: 1em;
width: 73%;}

#name{
width: 73.5%;}

textarea {vertical-align: top;}

div#inner-editor{
padding: 30px;}

#message{
padding-top: 10%;}

.sendButton{
background: rgba(0, 0, 0, 0);
color: #d8d9de;
font-size: 1.2em;
font-family: 'apple_chancerychancery';
padding: 0.8% 4%;
border: none;
margin-left: 42%;
cursor: pointer;
box-shadow: inset 2px 2px 9px rgba(199, 255, 100, 0.73), inset -2px -2px 9px rgba(199, 255, 100, 0.73);}

Answer 1

CSS中只有2个变化：

#sprite2_contact {
    top: 0px !important;
}

只是为了克服内联的顶部..

和

#content {
    margin-top: 28%;
}

嗯，那里你已经有了一个保证金属性，只是放在后面，以便另一个被覆盖

我已经以这种方式设置了这些更改，而不是更改您的更改，因此可以更轻松地查看和还原更改

根据精灵使我的表格反应灵敏

1 个答案: