Question

我正在尝试在应用启动时显示完全不透明度的背景图像，但在内容放置在其上时会消失。 HTML：

<div class="splash_div" id="splash_div" style="background: url('{{ splash_screen }}')  no-repeat">

          <div id="content">

          </div>
    </div>

jquery的：

$("#splash_div").css({ 'opacity': 0.5 });

这很好用，但我的内容也不透明。我尝试在我的内容中移动我的背景图像，但是当我将内容放入我的内容div时它就消失了。

Answer 1

使用伪元素after，伪元素:after或:before透明度不会影响您的splash_screen div

<强> HTML

<div class="splash_div" id="splash_div">
    <div id="content"></div>
</div>

<强> CSS

.splash_div::after {
    content: "";
    background: url(http://www.freebiesgallery.com/wp-content/uploads/2012/12/splash-screen-04.jpg) no-repeat center;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    position: absolute;
    z-index: -1;   
}
.splash_div.alpha::after {
    opacity:0.5;
}

<强> JS

$("#splash_div").addClass('alpha')

请注意，您无法使用 jquery 操作这些伪元素after和before来更新背景图片。

这里有一个完整的例子jsfiddle

Answer 2

您可以将splash_div和content分开，创建第一个绝对或固定位置，使用负z-index（或低于内容）。在Fiddle playground中，也在下面：

＆＃13;

* {
    box-sizing: border-box;
}
#splash_div {
    padding: 20px;
    opacity: .5;
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    z-index: -1;
}
#content {
    width: 200px;
    height: 200px;
    margin: 0 auto;
    background: #fff;
}

＆＃13;

<div class="splash_div" id="splash_div" style="background: url('http://lorempixel.com/output/cats-q-c-640-480-8.jpg')  no-repeat center / cover"></div>
<div id="content">
     <h3>Testing content</h3>

    <p>Opacity is not a problem</p>
</div>

＆＃13;

当我使背景不透明时，让内容不会变得不透明

2 个答案: