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 回答