Question

我想制作一个类似于附件的主页图像（由于我没有足够的点数/声誉，stackoverflow不会让我作为图像共享，而是一个链接）。即使我做了很多研究，我也找不到任何答案，也没有想办法实现这一目标。基本上，我想将文字字母与图像集成在一起。我想用HTML编写文本。有什么办法可以帮助我吗？

非常感谢。最好，内森。

Integrated Text/Image

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

我的观点有些古板：您并不是严格意义上在文本上方或后面放置文本，而是在图像中分层文本。

SVG可能允许您执行此操作，但这并不容易。
最好只创建所需的图像集嵌入文本。
将图像和文本（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-index

添加集成的文本/图像CSS

2 个答案: