Question

我需要在照片上放一些文字，它必须永远保持那种颜色。我做到了，但当我在图片上盘旋时 - 文字消失了。我该怎么办？没有找到答案。我希望文本一直存在，无论是否悬停。这是我的代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>

    .photo-text.one {
        background-size: cover;
        background: url("https://i2.wp.com/www.thehopelesshousewife.com/wp-content/uploads/2013/12/Christmas-No-Bake-Nachos-576x409.jpg") no-repeat center top;
        height: 409px;
        position: relative;
        width: 576px;
    }

    .img-overlay{
        width: 100%;
        height: 100%;
        background: #6fc3df;
        opacity: 0.75;
    }

    .photo-text.one:hover:after {
        content: ' ';
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        background: url("https://i2.wp.com/www.thehopelesshousewife.com/wp-content/uploads/2013/12/Christmas-No-Bake-Nachos-576x409.jpg") no-repeat center top;
    }

    .text {
        position: absolute;
        top: 100px;
        left: 150px;
        color: red;
    }
</style>
</head>
<body>
<div class="photo-text one">
    <div class="img-overlay">
    </div>
    <h2 class="text">fffff</h2>
</div>
</body>
</html>

Answer 1

将z-index属性添加到您的文字中。

Information here

＆＃13;

.photo-text.one {
  background-size: cover;
  background: url("https://i2.wp.com/www.thehopelesshousewife.com/wp-content/uploads/2013/12/Christmas-No-Bake-Nachos-576x409.jpg") no-repeat center top;
  height: 409px;
  position: relative;
  width: 576px;
}

.img-overlay {
  width: 100%;
  height: 100%;
  background: #6fc3df;
  opacity: 0.75;
}

.photo-text.one:hover:after {
  content: ' ';
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background: url("https://i2.wp.com/www.thehopelesshousewife.com/wp-content/uploads/2013/12/Christmas-No-Bake-Nachos-576x409.jpg") no-repeat center top;
}

.text {
  position: absolute;
  top: 100px;
  left: 150px;
  color: red;
  z-index: 1;
}

＆＃13;

<div class="photo-text one">
  <div class="img-overlay">
  </div>
  <h2 class="text">fffff</h2>
</div>

＆＃13;

在制作悬停效果css的同时保持图像上的文字

1 个答案: