Html 在 Materialise CSS 中用文本覆盖图像
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/30113116/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
overlaying an image with text in Materialize CSS
提问by WΔ_
I've tried multiple ways to overlay the background image with text, to no avail. The template provided on the materializeCSS website involves parallax, which I don't want.
我尝试了多种方法来用文本覆盖背景图像，但无济于事。materializeCSS 网站上提供的模板涉及视差，我不想要。
The aim is to have a 'card' sit on top of a large image stretching across the browser window. I actually aim to do this separately for several cards.
目的是让一张“卡片”位于横跨浏览器窗口的大图像之上。实际上，我的目标是为几张卡分别执行此操作。
Here's my code (for a particular card):
这是我的代码（针对特定卡）：
<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>
I understand that the image tag is to be:
我知道图像标签是：
<img src="URL">
But wherever I put it, it doesn't place an image behind the card. I've tried all the obvious stuff such as adding a new div class, but perhaps I'm adding the wrong kind. really racking my brains on this one.
但无论我把它放在哪里，它都不会在卡片后面放置图像。我已经尝试了所有显而易见的东西，例如添加一个新的 div 类，但也许我添加了错误的种类。真的在这个问题上绞尽脑汁。
How do I place an image (spanning the width of the browser and around 700px in height) behind a card?
如何在卡片后面放置图像（跨越浏览器的宽度和大约 700 像素的高度）？
回答by WΔ_
Thank you for your responses!
谢谢您的反馈！
It was very simple in the end:
最后很简单：
<div class = "iris">
<div class = "card transparent z-depth-5">
</div>
</div>
Basically you wrap a div around the card div and then for, in this case, iris, you set the background image using CSS.
基本上，您将一个 div 包裹在卡片 div 周围，然后对于本例中的 iris，您可以使用 CSS 设置背景图像。
.iris {
background-image: url("");
background-repeat: no-repeat;
height: 100vh;
background-size: cover;
}
By using card class 'transparent' you get this cool effect whereby the card is actually see-through and looks like glass, but you do need a high z-depth index so that the shadow of the card illuminates its edges.
通过使用卡片类“透明”，您可以获得这种很酷的效果，卡片实际上是透明的，看起来像玻璃，但您确实需要高 z 深度索引，以便卡片的阴影照亮其边缘。
Cheeeeers
啦啦队
回答by Patrick Evans
You can do this in 2 ways
你可以通过两种方式做到这一点
- Use the background(background-image)css property. You can also set the background-sizeto help with the background size (ie keep the image contained in the parent, let it overflow, stretch to fit etc)
- Set positioncss property of the img element to absolute, set the z-indexof the card to some value higher than the z-index of the img element.
- 使用background(background-image)css 属性。您还可以设置背景大小以帮助设置背景大小（即保持包含在父级中的图像，让它溢出，拉伸以适应等）
- 将img 元素的positioncss 属性设置为 absolute，将卡片的z-index设置为高于img 元素的z-index的某个值。
Do not know if Materialize CSS provides premade css classes for some of these settings you would have to check their documentation.
不知道 Materialize CSS 是否为其中一些设置提供了预制的 css 类，您必须检查他们的文档。
background css property
背景css属性
CSS
CSS
.cardbg {
background:url(URL) no-repeat 0% 0%;
background-size:cover;
}
HTML
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>
Positioned img element
定位 img 元素
CSS
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
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>
background css demo
背景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>Positioned element demo
定位元素演示
.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>回答by Ruslan López
You can add the image as background of some div, or even the whole body
您可以将图像添加为某些 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>