css 卡标题消失，尽管z索引？

ebdffaop 于 2023-01-03 发布在其他

关注(0)|答案(2)|浏览(132)

我尝试制作一张带有标题和描述的卡片，但是当我在那张图片上设置背景图片时，我的卡片标题消失了，但我的描述没有消失。即使我对它们都做了相同的代码，也会发生这种情况。
我知道我不必在这里写动画代码太多，但我真的不知道为什么会发生这种情况。
图片：

我猜z-index不起作用。

.index {
  width: 400px;
  height: 400px;
  background-color: white;
  float: left;
  margin-right: 30px;
  border-radius: 10px;
  overflow: hidden;
  position: relative;
  color: white;
  cursor: pointer;
}

.index_img {
  width: 100%;
  height: 100%;
  z-index: -1;
}

.index_html {
  background-image: url(web_image_html.jpeg);
  background-position: center;
  background-size: cover;
  z-index: -1;
}

.index a {
  color: #fff;
  text-decoration: none;
}

.index_title {
  text-align: center;
  font-family: 'Roboto', sans-serif;
  font-size: 30px;
}

.index_description {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  font-family: 'Inter', sans-serif;
  width: 100%;
  font-size: 18px;
}

.index_title,
.index_description {
  background-color: rgba(82, 81, 81, 0.56);
  height: 80px;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
}

.index_html:hover {
  animation: index-animate 3s ease-in-out;
}

@keyframes index-animate {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(1.3);
  }
}

<div class="index">
  <a href="">
    <div class="index_img index_html"></div>
    <h2 class="index_title">HTML</h2>
    <p class="index_description">Lorem ipsum dolor sit amet.</p>
  </a>
</div>

css

来源：https://stackoverflow.com/questions/74977363/card-title-disappear-despite-z-index

2条答案

按热度按时间

nlejzf6q1#

删除隐藏在下面代码中的溢出

.index {
  width: 400px;
  height: 400px;
  background-color: white;
  float: left;
  margin-right: 30px;
  border-radius: 10px;
  position: relative;
  color: white;
  cursor: pointer;
}

赞(0）回复(0）举报 2023-01-03

ws51t4hk2#

您的思路是正确的!但是您在使用display: flex;和position: absolute;时有些笨拙。display: flex;应该用于父对象以查看子对象（ren）的结果，而您却直接用于子对象（.index_title和.index_description）。
对于尝试将2个元素与position: absolute;放置在一起，我建议将它们 Package 在一起，这样您只需放置1个元素!

.index {
    width: 400px;
    height: 400px;
    background-color: white;
    float: left;
    margin-right: 30px;
    border-radius: 10px;
    overflow: hidden;
    position: relative;
    color: white;
    cursor: pointer;

}

.index_img {
    width: 100%;
    height: 100%;
    z-index: -1;
}

.index_html {
    background: url(web_image_html.jpeg) red;
    background-position: center;
    background-size: cover;
    z-index: -1;
}

.index a {
    color: #fff;
    text-decoration: none;
}

.index_content {
    width: 100%;
    height: 80px;
    position: absolute;
    bottom: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: rgba(82, 81, 81, 0.56);
}

.index_title {
    font-family: 'Roboto', sans-serif;
    font-size: 30px;
    color: #000;
}

.index_description {
    font-family: 'Inter', sans-serif;
    font-size: 18px;
}

.index_title,
.index_description {
    width: 100%;
    margin: 0;
    text-align: center;
}

.index_html:hover {
    animation: index-animate 3s ease-in-out;
}

@keyframes index-animate {

    0% {
        transform: scale(1);
    }

    100% {
        transform: scale(1.3);
    }
    
}

<div class="index">
    <a href="">
        <div class="index_img index_html"></div>
        <div class="index_content">
          <h2 class="index_title">HTML</h2>
          <p class="index_description">Lorem ipsum dolor sit amet.</p>
        </div>
    </a>
  </div>

赞(0）回复(0）举报 2023-01-03

我来回答

css 卡标题消失，尽管z索引？

2条答案

相关问题

热门标签

最新问答