0

このチュートリアルに従って、スライドフォームを作成しました。唯一の問題は、フォームの背景が塗りつぶされておらず、背景の要素が次のようにフォームを通して表示されることです。

ここに画像の説明を入力してください

これは次の形式のコードです。

    <div id="feedback">

    <%  @message = Message.new %>
    <h2>Envía tu feedback</h2><br />
    <%= form_for @message, :url => contact_path do |form| %>
  <fieldset class="fields">
    <div class="field">
      <%= form.label "Mensaje" %>
      <%= form.text_area :body %>
    </div>
  </fieldset>

  <fieldset class="actions">
    <%= form.submit "Send" %>
  </fieldset>
<% end %>

<a href="#" class="pull_feedback" title="Haz click para enviar feedback">Feedback</a>
    </div>

不透明度を1に設定しましたが、何も変わりません。これがフィードバックフォームの主なスタイルです。

        #feedback{
        background: #ffffff;
        position: fixed;
        top:100px;
        left:-392px;
        opacity:1;
    }

背後にあるボタンが見えるだけでなく、ボタンを操作することもできます。メッセージのテキスト領域に書き込むのが非常に難しくなります（Mensaje）。

これは、その背後にあるテキストの形式です。

<li>
    <input id="ac-2" name="accordion-1" type="radio"/>
    <label for="ac-2">Eventos</label>
    <article class="ac-xsmall">
    <p>
       <!-- some text links -->
    </p>
    </article>
</li>

そしてアコーディオンのスタイルは次のとおりです。

   /* Acordion */
.ac-container label{
    font-family: 'BebasNeueRegular', 'Arial Narrow', Arial, sans-serif;
    padding: 5px 20px;
    position: relative;
    z-index: 20;
    display: block;
    height: 30px;
    cursor: pointer;
    color: #777;
    text-shadow: 1px 1px 1px rgba(255,255,255,0.8);
    line-height: 33px;
    font-size: 19px;
    background: linear-gradient(top, #ffffff 1%,#eaeaea 100%);
    box-shadow:
        0px 0px 0px 1px rgba(155,155,155,0.3),
        1px 0px 0px 0px rgba(255,255,255,0.9) inset,
        0px 2px 2px rgba(0,0,0,0.1);
}
.ac-container label:hover{
    background: #fff;
}

.ac-container input:checked + label,
.ac-container input:checked + label:hover{
    background: #c6e1ec;
    color: #3d7489;
    text-shadow: 0px 1px 1px rgba(255,255,255, 0.6);
    box-shadow:
        0px 0px 0px 1px rgba(155,155,155,0.3),
        0px 2px 2px rgba(0,0,0,0.1);
}
.ac-container label:hover:after,
.ac-container input:checked + label:hover:after{
    content: '';
    position: absolute;
    width: 24px;
    height: 24px;
    right: 13px;
    top: 7px;
    background: transparent url(/images/arrow_down.png) no-repeat center center;
}

.ac-container input:checked + label:hover:after{
    background-image: url(/images/arrow_up.png);
}
.ac-container input{
    display: none;
}
.ac-container article{
    background: rgba(255, 255, 255, 0.5);
    margin-top: -1px;
    overflow: hidden;
    height: 0px;
    position: relative;
    z-index: 10;
    transition:
        height 0.3s ease-in-out,
        box-shadow 0.6s linear;
}
.ac-container input:checked ~ article{
    transition:
        height 0.5s ease-in-out,
        box-shadow 0.1s linear;
    box-shadow: 0px 0px 0px 1px rgba(155,155,155,0.3);
}

.ac-container article p{
    font-style: italic;
    color: #777;
    line-height: 23px;
    font-size: 14px;
    padding: 20px;
    text-shadow: 1px 1px 1px rgba(255,255,255,0.8);
}

.ac-container input:checked ~ article.ac-xxsmall{
    height: 60px;
}

どうすればこれを修正できますか？ありがとう

4

1 に答える 1

0

CSS で #feedback 要素を不透明な白に設定しましたが、HTML で id="feedback" を含む要素が表示されません。

チュートリアルでは、フォームはこの DIV でラップされています。そこから背景が生まれます。次の div 内にフォームを配置します。

<div id="feedback">
...
</div>
于 2012-09-04T17:29:30.137 に答える