HTML / CSS将文本放在图像上而不会溢出？

Question

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

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

因此，“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>

我怎样才能使图像之外的任何文字切断？

Answer 1

这对你有用吗？

＆＃13;

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

使用overflow:hidden分组header

Answer 3

这就是你需要的吗？的 DEMO

.header {
  width: 100%;
  height: 160px;
  white-space: nowrap;
  overflow: hidden;
}
.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;
  z-index: 1;
}

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

Answer 4

.header span

{

overflow:hidden;

}