html - 背景颜色不起作用？

Question

我试图将文本悬停在图像中。如果我为文本设置背景颜色，则它不起作用。如果我使用 position: absolute; 它会起作用，但它也在我的标题上悬停。

.comimg {
  width: 100%;
  height: 75%;
}
.tren {
  margin-top: -250px;
  margin-bottom: -300px;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  background-color: aqua;
  overflow: none;
}
.trust p {
  margin-top: -19;
  font-size: 10px;
  font-weight: bolder;
  color: #424242;
}
.comimg p {
  font-family: 'Open Sans', sans-serif;
  width: auto;
  height: auto;
  font-size: 2em;
  color: aliceblue;
  background-color: aqua;
  font-weight: 900;
}
.comimg img {
  width: 100%;
  height: 100%;
}

<div class="comimg">
  <img src="img/6042013705_eb32ce58fa_o.jpg" />
  <div class="tren">
    <p>#trending</p>
  </div>
</div>

Answer 1

根据我的理解，您可以使用 CSS 和 HTML 实现该效果。

我在 .wrapper div 上使用 :hover 选择器，以便根据我想要实现的结果应用不同的样式。

示例

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

body {
  font-family: Helvetica, sans-serif;
}

main {
  width: 600px;
  margin: 0 auto;
}

.wrapper {
  height: 100vh;
  width: 100%;
  background: url('http://lorempixel.com/500/500/abstract') no-repeat;
  background-size: cover;
  display: table;
}

.wrapper:hover {
  background: #fda;
}

.wrapper:hover p {
  background: #345;
  display: block;
}

p {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #fff;
  font-size: 2.4em;
  display: none;
}

<main>
  <div class="wrapper">
    <p>
      #trending
    </p>
  </div>
</main>