Question

我试图让div覆盖背景图片，但不是内容，如下所示：

<div class="container-fluid">
    <div class="row">
        <div class="col-sm-12 featured">
            <div class="overlay"></div> <!--optional-->
            <center>
                <img src="img/logo.svg">
                <h1>Title</h1>
            </center>                   
        </div>
    </div>
</div>

div精选的地方有背景图片：

.featured {
    background-image: url(img/bg.jpg);
}

现在我已经尝试过了：

.overlay {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background-color: rgba(255, 255, 255, 0.4);
}

还有：

.featured:before {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background-color: rgba(255, 255, 255, 0.4);
}

但这一切都覆盖了内容。有更好的技术吗？

Answer 1

#overlay-black {
    background:rgba(50, 50, 50, 0.2);
    opacity:0;
    -webkit-transition: opacity .25s ease;
    opacity:100;
    height: 100%;
    width: 100%;
}

和覆盖黑色的css

import java.nio.file.DirectoryStream;
import java.nio.file.FileSystems;
import java.nio.file.Files;
import java.nio.file.Path;
...

Path dir = FileSystems.getDefault().getPath( filePath );
DirectoryStream<Path> stream = Files.newDirectoryStream( dir, "*.{txt,doc,pdf,ppt}" );
for (Path path : stream) {
    System.out.println( path.getFileName() );
}
stream.close();

Answer 2

我只需在position和z-index元素上声明<h1>和img就可以做到这一点

请看我的小提琴：https://jsfiddle.net/LwwgLc0w/

使div覆盖背景图像但不是内容

2 个答案: