3

我尝试了多种方法来用文本覆盖背景图像，但无济于事。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 像素的高度）？

4

3 回答 3

11

谢谢您的反馈！

最后很简单：

<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 深度索引，以便卡片的阴影照亮其边缘。

啦啦队

于 2015-07-12T13:59:44.520 回答
2

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

  1. 使用background(background-image) css 属性。您还可以设置背景大小以帮助调整背景大小（即保持图像包含在父级中，让它溢出，拉伸以适应等）
  2. 将img 元素的位置css 属性设置为绝对值，将卡片的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>

于 2015-05-07T23:36:56.310 回答
1

您可以将图像添加为某些 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>

于 2015-07-08T15:11:10.887 回答