在 Materialise 中用文本覆盖图像 CSS

Question

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

目标是让 'card' 位于跨越浏览器 window 的大图像之上。实际上，我的目标是分别为几张卡片执行此操作。

这是我的代码（针对特定卡）：

<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 class，但也许我添加的种类不对。这个真是绞尽脑汁

如何在卡片后面放置一张图片（横跨浏览器的宽度和大约 700 像素的高度）？

Answer 1

您可以通过两种方式做到这一点

使用 background(background-image) css property. You can also set the background-size 来帮助设置背景大小（即保持图像包含在父级中，让它溢出，拉伸以适合等）
将卡片的 position css property of the img element to absolute, set the z-index 设置为高于 img 元素的 z-index 的某个值。

不知道 Materialize CSS 是否为其中一些设置提供了预制的 css 类，您必须查看它们的文档。

背景css属性

CSS

.cardbg {
   background:url(URL) no-repeat 0% 0%;
   background-size:cover;
}

HTML

<div class="cardbg">
    <div class="card z-depth-5 teal darken-4">
        <span class="card-title white-text text-darken-4">
        </span>
    </div>
</div>

定位的img元素

CSS

.container {
   position:relative;
}
.card {
   position:relative;
   z-index:10;
}
.cardbg {
   position:absolute;
   left:0px;
   top:0px;
   width:100%;
   height:100%;
   z-index:1;
}

HTML

<div class="container">
    <img src="URL" class="cardbg" />
    <div class="card z-depth-5 teal darken-4">
        <span class="card-title white-text text-darken-4">
        </span>
    </div>
</div>

背景css演示

.cardbg {
   position:absolute;
  left:0px;
  top:0px;
  width:100%;
  height:100%;
   background:url(http://placehold.it/1024x768) no-repeat 0% 0%;
   background-size:cover;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.95.3/js/materialize.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.95.3/css/materialize.min.css" rel="stylesheet" />
<div class="cardbg">
    <div class="card z-depth-5 teal darken-4">
        <span class="card-title white-text text-darken-4">
          Some card
        </span>
    </div>
</div>

定位元素演示

.container {
   position:absolute;
  left:0px;
  top:0px;
  width:100%;
  height:100%;
}

.card {
  position:relative;
  z-index:1;
}

.cardbg {
   position:absolute;
   left:0px;
   top:0px;
   width:100%;
   height:100%;
  z-index:0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.95.3/js/materialize.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.95.3/css/materialize.min.css" rel="stylesheet" />
<div class="container">
    <img src="http://placehold.it/1024x768" class="cardbg" />
    <div class="card z-depth-5 teal darken-4">
        <span class="card-title white-text text-darken-4">
          Some text
        </span>
    </div>
</div>

Answer 2

您可以将图片添加为部分div甚至全身

的背景

body {
  background-image: url('https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcRLcjS59w8iUV6NqkYvcHOzlqS21rr13KyqGppuYJf5KI88AYB_IA');
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.95.3/js/materialize.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.95.3/css/materialize.min.css" rel="stylesheet" />
<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">Title</span>
      <p class="grey-text text-darken-1">Content sdfa sd fas dfa sdf</p>
      <br>
      <p class="grey-text text-darken-1">Content sdfa sd fas dfa sdf</p>
    </div>
  </div>
</div>

Answer 3

感谢您的回复！

最后很简单：

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

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

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

通过使用卡片 class 'transparent' 你会得到很酷的效果，卡片实际上是透明的，看起来像玻璃，但你确实需要一个高 z 深度索引，以便阴影卡片的边缘照亮了它。

Cheeeeers

在 Materialise 中用文本覆盖图像 CSS

overlaying an image with text in Materialize CSS

html

css

materialize