Question

如何将img放在此代码的底部，以便显示在下面？顶部的灰色不透明度，然后是整体顶部的文字。

我需要在所有div上自动调整高度，因为需要在cms中编辑文本。目前它拥有背景图片，因为我无法弄清楚如何使用img。

以下代码： -

            <div class="underlay">
                <div class="overlay"></div>
                    <div class="main">
                    <div class="container">
                        <div class="row">
                            <section class="span10 information"><!-- Editable Content -->
                                <h1>Lorem ipsum dolor sit amet</h1>

                                <div class="span5 alpha">
                                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas consectetur augue odio, sit amet porta magna consequat eu. Nunc viverra tempor turpis a gravida. Vestibulum sed nibh a lorem viverra iaculis.</p>
                                </div>

                                <div class="span5 omega">
                                <p>Proin ultrices felis sed iaculis convallis. In pharetra rutrum elit quis varius. Donec egestas consequat dui, vel posuere massa cursus quis. Maecenas vulputate, augue vitae sagittis molestie, ipsum neque rhoncus turpis, sit.</p>
                                </div>

                            </section><!-- End of Editable Content -->
                        </div>
                    </div>
                </div>
            </div>

CSS： -

            .container {margin:0 auto; width:960px}

            .underlay {width:100%; z-index:0; position:relative; text-align:center; height: auto; padding:0 0 50px 0; background:url(../img/backgrounds/competitors.jpg) no-repeat center top;}
            .overlay {width:100%; height:100%; background:url(../img/backgrounds/block.png); display:block; z-index:2; position:absolute; clear:both}
            .main {width:100%; padding:34px 0 0 0; z-index:3;  position:relative; text-align:left;}
            .main h1 {font-family: 'Gotham A','Gotham B','Open Sans',sans-serif; font-style: normal; font-weight: 900; font-size:40px; color:#fff; margin:0 0 32px 0;}
            .main p {line-height:26px; font-size:13px; color:#fff;}
            .main .information {margin:15px 0 30px 0;}

Answer 1

我认为这个技巧可以帮到你（使用虚拟元素等于原始元素：after）

.underlay::after {
  content: "";
  background: url(../img/backgrounds/competitors.jpg);
  opacity: 0.5;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  position: absolute;
  z-index: -1;   
}

如何使用img而不是背景图像来编辑可编辑内容

1 个答案: