html - HTML/CSS将文字放在图片上而不会溢出？

我在图片上的网站上放置了一些文本，看起来像这样：



现在，我希望它看起来像这样：



因此，将“ y”的下半部分切除。我当前的html / css是：

.header {
  width: 100%;
  white-space: nowrap;
}
.header img {
  width: 100%;
  background-color: #575757;
  box-shadow: 0.000em 0.188em 0.188em #999999;
  position: relative;
  left: 0;
}
.header span {
  font-size: 4.938em;
  color: #f8f8f8;
  font-weight: bold;
  font-family: Arial, Helvetica, sans-serif;
  margin: 0;
  text-shadow: 0 0 0.05em #999999;
  /*place it over heading image*/
  vertical-align: baseline;
  position: relative;
  top: 0;
  width: 0;
  display: inline-block;
  overflow: visible;
  z-index: 100;
}

<div class="header">
  <span>Systems</span><!-- no whitespace
    --><img src="http://lorempixel.com/400/100/" />
</div>

我怎样才能使图像外的所有文字都被截断？

最佳答案

这对您有用吗？

.header {
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  position: relative;
}
.header img {
  width: 100%;
  background-color: #575757;
  box-shadow: 0.000em 0.188em 0.188em #999999;
  position: relative;
  left: 0;
}
.header span {
  font-size: 4.938em;
  color: #f8f8f8;
  font-weight: bold;
  font-family: Arial, Helvetica, sans-serif;
  text-shadow: 0 0 0.05em #999999;
  position: absolute;
  height: 75px;
  bottom: 4px;
  width: 100%;
  display: inline-block;
  overflow: hidden;
  z-index: 100;
}

<div class="header">
  <span>Systems</span><!-- no whitespace
    --><img src="http://lorempixel.com/400/100/" />
</div>

关于html - HTML/CSS将文字放在图片上而不会溢出？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/35705658/