添加集成的文本/图像 CSS

Question

我想制作一个像附件一样的主页图像(因为我没有足够的积分/声誉，stackoverflow不会让我分享为图像，而它是一个链接(。尽管我做了很多研究，但我找不到任何答案，也想不出任何方法来实现这一目标。基本上，我想将文本字母与图像集成在一起。我想用HTML编写文本。有什么办法可以帮助我吗？

多谢。 最好 内森。

集成文本/图像

Answer 1

我想你的答案在这里

<div class="dark">
<h1>Chicago</h1>
<img src="yourimage" alt="Photograph of the Chicago skyline taken from the water during the day">
</div>
<div class="light">
<h1>Houston</h1>
<img src="yourimage" alt="Photograph of the Houston skyline taken from a tree-lined park">
</div>
@import url(https://fonts.googleapis.com/css?family=Montserrat:700);
body { 
margin: 0;
}
div { 
text-align: center;
position: relative;
}
div h1 { 
margin: 0;
font-size: 20vw; 
text-transform: uppercase;
font-family: Montserrat, sans-serif;
line-height: 1.9;
}
.dark h1 {
color: #fff;
}
.light h1 {
color: #000;
font-size: 19vw;
}
div img { 
position: absolute;
top: 0;
left: 0;
width: 100%;  
}
.dark {
background: #000;
}
.light {
background: #fff;
}
.dark img {
mix-blend-mode: darken;
}
.light img {
mix-blend-mode: lighten;
}

Answer 2

我略带主见的回答： 严格意义上，您不是将文本放在图像上方或后面，而是在图像中分层文本。

1. SVG可能允许您这样做，但这并不容易。
最好
2. 只是创建您需要的图像集 嵌入文本。
3. 将图像和文本(html(组合成一组图层，透明图像，文本，另一个图像等。 这方面的CSS可能非常复杂，需要正确"堆叠"图层，创建多个图像以在该堆栈中显示。参考：https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context 具有堆叠 https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Adding_z-index 的相关 z 索引