如何使用懸停疊加圖像設置文本格式

Question

我有以下代碼，目標是顯示一個名稱，而不將鼠標懸停在形狀的中心，然后將鼠標懸停在具有5條直線的生物上，然后將它們全部居中，並在換行符之間保持最小間距。

我的代碼中的問題當前是將前端格式化為全部居中，並具有與懸停后相同的大字體，甚至更值得注意的是錯誤的-背面的信息從形狀的末端移開。 不居中。

<html>

<div id="box">
  John Doe

  <div id="overlay">
    <span id="plus">Title:<br>DOB:<br>Hometown:<br>Info4:<br>Info5:</span>
  </div>

</div>

<style>

body {
  background: -1;
}

#box {
  width: 300px;
  height: 200px;
  box-shadow: inset 1px 1px 40px 0 rgba(0, 0, 0, 0.45);
  border-bottom: 2px solid #fff;
  border-right: 2px solid #fff;
  margin: 5% auto 0 auto;
  background-size: cover;
  border-radius: 5px;
  overflow: hidden;

  /* NEW */
  line-height: 200px;
  text-align: center;
  position: relative;
}

#overlay {
  background: rgba(0, 0, 0, 0.75);
  text-align: center;
  padding: 45px 0 66px 0;
  opacity: 0;
  -webkit-transition: opacity 0.25s ease;
  -moz-transition: opacity 0.25s ease;

  /* NEW */
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}

#box:hover #overlay {
  opacity: 1;
}

#plus {
  font-family: Helvetica;
  font-weight: 900;
  color: rgba(255, 255, 255, 0.85);
  font-size: 24px;
}


</style>
</html>

Answer 1

這不是您所有問題的答案，但是要使字體樣式相同，請將#plus的字體樣式添加到#box選擇器中。 您必須將框選擇器的顏色更改為黑色，對於#plus，您可以保留當前的顏色。

如何使用懸停疊加圖像設置文本格式

問題描述

1 個解決方案

解決方案1
0 已采納 2018-07-08 02:09:23

如何使用懸停疊加圖像設置文本格式

問題描述

1 個解決方案

解決方案1 0 已采納 2018-07-08 02:09:23

解決方案1
0 已采納 2018-07-08 02:09:23