时间戳

首页 > 解决方案 > 堆叠元素而不改变它们的位置

css - 堆叠元素而不改变它们的位置

问题描述

.card {
  color: white;
  padding: 100px;
  background: url("https://oniichann.tk/waifus/images/bg.jpg");
  background-repeat: no-repeat;
  background-position: right;
  background-size: cover;
  position: relative;
  z-index: 2;
}

.card:before {
  content: "";
  z-index: 2;
  position: absolute;
  top: 0;
  bottom: 0;
  /* top: 89%; */
  /* left: 0.25%; */
  /* width: 99.5%; */
  height: 100%;
  width: 100%;
  right: 0;
  border-radius: 5px;
  background: linear-gradient(
    90deg,
    rgba(0, 0, 0, 1) 0%,
    rgba(0, 0, 0, 0) 100%
  );
  background-size: 200% 200%;
  transition: background-position 0.5s linear;
}

.card:hover:before {
  background-position: 100% 50%;
}

.body  .card .card_img{
    opacity: 1;
    max-width: 80%;
    max-height: 95%;
    border-radius: 5px;
    /* bottom: 9px; */
    /* left: -10px; */
    /* top: -10px; */
    transition: 0.5s;
    display: flex;
    justify-content: flex-start;
    align-self: center;
    z-index: 4;
}

.body  .card .card_name{
    opacity: 1;
    margin-right: 2%;
    margin-top: auto;
    margin-bottom: auto;
    font-size: 2.5rem;
    text-shadow: 0px 0px 18px black;
    z-index: 4;
}

我如何.card:before在不改变位置的情况下制作和.card制作和制作.card .card_name？目前，它涵盖了所有内容，我不希望这样。我试着穿上，但它落后了，这意味着它在技术上现在是不可见的，这样做没有意义。我看到另一个类似的问题 Z-Index 没有绝对位置，但我尝试了答案，但它们没有用.card .card_img.card:before.card:beforez-index: -1.card:before.card

标签： css

解决方案

推荐阅读