主页 / 问题 / 1562143
Accepted
Aноним
Asked:2024-01-18 17:05:06 +0800 CST2024-01-18 17:05:06 +0800 CST

当在图像上放置渐变时，渐变会消失，尽管它在堆栈中起作用

  • 772

 .baner-img{
display: flex;
margin: 0 auto;
width: 50%;
height: 50%;

}

.gradient {
    position: relative;

}

.gradient-color {
    width: 100%;
    height: 551px;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.00) 0%, #0E0E0E 66.15%);
    position: absolute; 
    /* При position: absolute градиент исчезает */
}
<section class="baner">
    <img class="baner-img" src="https://cdn-edge.kwork.ru/pics/t3/23/27100204-64636693aaf80.jpg" alt="">
    <div class="gradient">
        <div class="gradient-color"></div>
    </div>
</section>

在此输入图像描述

html

1 个回答

  1. Best Answer

    .baner {
  width: 660px;
  height: 440px;
  position: relative;
  margin: auto;
}

.baner-img {
  position: absolute;
  width: 50%;
  height: 50%;
  left: 25%;
  top: 2%;
}

.gradient {
  position: absolute;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.00) 0%, #0E0E0E 66.15%);
  width: 50%;
  height: 50%;
  left: 25%;
  top: 2%;
}
    <section class="baner">
  <img class="baner-img" src="https://cdn-edge.kwork.ru/pics/t3/23/27100204-64636693aaf80.jpg" alt="#">
  <div class="gradient"></div>
</section>

    匿名，我对你的职权范围的理解正确吗？

    • 0

相关问题