html - 如何使hr标签在文本框上不可见

Question

这是我的网站:http://vani.valse.com.my/schone_lightings/index.php 我不想要 <hr>标记出现在文本框的顶部，并在 class="subscribe"下提交按钮。我尝试为订阅类设置更高的 z-index，但没有帮助!

HTML

<div class="hide-for-small-only hide-for-medium-only  line_wrapper"><!--start of line bg div-->
    <hr class="hr_tag"/>
            <div class="row collapse">
                <div class="small-12 medium-12 large-6 large-centered columns subscribe">
                    <div class="row collapse">
                    <div class="small-12 medium-12 large-10 columns">
                    <input type="text" value="" placeholder="Enter your email address for newsletter subscription"> 
                    </div>
                    <div class="small-12 medium-12 large-2 columns">
                        <input type="submit" value="SUBSCRIBE">
                    </div>
                     </div>
                </div>
            </div>
</div><!--end of line bg div-->

CSS

.line_wrapper
{
    margin-top:3%;
    margin-bottom:3%;
    position: relative;

}
.subscribe
{
z-index: 60;
}

.subscribe input[type="submit"]

{

    background-color:#000;

    color:#fff;

    border: 1px solid #000;

    padding:10px;

    height: 50px;


}

.subscribe input[type="text"]

{



    color:#000;

    padding:10px;

    height:50px;

}
.hr_tag {
    position: absolute;
    z-index: 50;
    top: 10px;
    right: 0;
    left: 0;
}

Answer 1

首先，您在顶部 div 上应用了背景线图像，并将opacity:0.9 赋予了row div。 因此，由于行的背景图像在 textbox 和 button 上可见。或者您可以只为文本框和按钮删除不透明度，或者删除线条图像的中间部分。