html - 在 Materialise CSS 中用文本覆盖图像

Question

我尝试了多种方法来用文本覆盖背景图像，但都无济于事。 materializeCSS 网站上提供的模板涉及视差，这是我不想要的。

目的是让一张“卡片”位于横跨浏览器窗口的大图像之上。实际上，我的目标是分别为多张卡片执行此操作。

这是我的代码(针对特定卡):

<div class="row center">
    <div class="col s12 l6 offset-l6">
        <div class="card z-depth-5 teal darken-4">
            <span class="card-title white-text text-darken-4">
            </div>
        </div>
    </div>          
</div>

我知道图片标签是:

<img src="URL">

但是无论我把它放在哪里，它都不会在卡片后面放置图像。我已经尝试了所有明显的方法，例如添加一个新的 div 类，但也许我添加的种类不对。真的在这个问题上绞尽脑汁。

如何在卡片后面放置一张图片(横跨浏览器的宽度，高度约为 700 像素)？

Answer 1

感谢您的回复!

最后很简单:

<div class = "iris">
   <div class = "card transparent z-depth-5">
   </div>
</div>

基本上，您将一个 div 包裹在卡片 div 周围，然后对于 iris，您使用 CSS 设置背景图像。

.iris {
    background-image: url("");
    background-repeat: no-repeat;
    height: 100vh;
    background-size: cover;
}

通过使用卡片类“透明”，您可以获得这种很酷的效果，卡片实际上是透明的，看起来像玻璃，但您确实需要高 z 深度索引，以便卡片的阴影照亮其边缘。

奶酪