在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周围包裹一个div,然后在这种情况下,虹膜,你使用CSS设置背景图像.

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

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

Cheeeeers