我的span css样式在背景图片后面

Question

我的 span 的 css 样式将其置于

background-image

后面，当我更改 span 的

z-index

时，它会覆盖按钮中的文本。

此外，更改

background-image

中的

z-index

.banner

不会改变任何内容。

 .banner{
        width: 100%;
        height: 100vh;
        background-image: linear-gradient(rgba(0,0,0,0.75),rgba(0,0,0,0.75)),url(bluehex.jpg);
        background-size: cover;
        background-position: center;
        z-index: -999999;
    }

    button{
        width: 200px;
        padding: 15px 0;
        text-align: center;
        margin: 20px 10px;
        border-radius: 25px;
        font-weight: bold;
        border: 2px solid aqua;
        background: transparent;
        color: aqua;
        cursor: pointer;
        font-size: medium;
        position: relative;
        overflow: hidden;
    }

    span{
        background: aqua;
        height: 100%;
        width: 0%;
        border-radius: 25px;
        position: absolute;
        left: 0;
        bottom: 0;
        z-index: -1;
        transition: 0.5s;
    }

    button:hover span{
        width: 100%;
    }

    button:hover{
        border: none;
        color: rgb(0, 74, 74);
    }

当我注释掉

.banner

文件时，我可以看到转换发生，但是当

background-image

处于活动状态时，我只能看到边框消失。跨度过渡发生在背景图像后面。

如果我制作跨度

z-index: 0

，那么它会覆盖按钮中的文本。

如果您知道这里发生了什么，请帮忙。

我试图在按钮上进行跨度CSS转换，但是如上所述，我被困在这里了。

Answer 1

除了我在 OP 评论上发布的学习 Kevin Powell 技巧的建议之外，这是我对按钮的工作版本的尝试：

html,
body {
  margin: 0;
  padding: 0;
}

.banner {
  background-image: linear-gradient(rgba(0, 0, 0, 0.75), rgba(255, 255, 255, 0.75));
  background-position: center;
  background-size: cover;
  box-sizing: border-box;
  height: 100vh;
}

button {
  background-color: rgb(255, 255, 255, 0.5);
  border: none;
  border-radius: 25px;
  color: rgb(0, 74, 74);
  contain: paint;
  cursor: pointer;
  font-size: medium;
  font-weight: bold;
  padding: 0;
  text-align: center;
  width: 200px;
}

span {
  background: aqua;
  border-radius: inherit;
  display: block;
  padding: 15px 0;
  transform: translateX(-100%);
  transition: transform 0.5s;
}

button:hover span {
  transform: translateX(0);
}

<div class="banner">
  <button><span>Button text</span></button>
</div>

---

请注意，我根本没有使用定位元素：技巧是将

translateX()

转换与按钮上的

contain: paint

规则相结合，因此在按钮空间之外完成的任何绘制都会从视图中剪掉（因此您可以将跨度滑动到按钮空间之外并在悬停时将其滑回）。

我还将 html 和正文边距和填充更改为零，因为此示例中使用的原始 CSS 显示了背景渐变上方的顶部白色边距。

啊，我习惯的一个很好的 CSS 规则排序规则是按字母顺序排列。这使得读取大型 css 文件变得更容易，我目前正在使用这种做法。

让我知道这是否有点接近您的预期。