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，然后在这种情况下为虹膜，你使用CSS设置背景图像。

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

使用卡类＆＃39;透明＆＃39;你得到这种很酷的效果，卡片实际上是透明的，看起来像玻璃，但你需要一个高z深度索引，以便卡片的阴影照亮它的边缘。

Cheeeeers

Answer 2

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

使用background(background-image) css属性。您还可以设置background-size以帮助处理背景大小（即保持图像包含在父级中，让它溢出，拉伸以适应等）
将img元素的position css属性设置为absolute，将卡的z-index设置为高于img元素的z-index的某个值。

不知道Materialise 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 3

您可以将图像添加为某个div甚至整个身体的背景

＆＃13;

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

＆＃13;

<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>

＆＃13;

在Materialise CSS中使用文本覆盖图像

3 个答案: