我想在卡片的文字上實(shí)現(xiàn)淡入淡出效果，如下圖所示: 圖1

為了實(shí)現(xiàn)這個(gè)效果，我使用下面的CSS對(duì)文本的偽元素的背景應(yīng)用了線性漸變:

.card-content .text {
    font-size: .9em;
    text-align: left;
    height: 100px;
    overflow: hidden;
}

.card-content .text:before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to top, white, transparent)
}

然而，我得到的結(jié)果與我預(yù)期的不同。淡化效果不會(huì)在文本內(nèi)容的底部結(jié)束，而是在& quot查看更多& quot按鈕，如下圖所示 圖2]1

我對(duì)此感到困惑，因?yàn)槲谋竞桶粹o是獨(dú)立的元素，我只對(duì)文本的偽元素應(yīng)用了線性漸變樣式。我的假設(shè)是，在文本的偽元素上使用position: absolute導(dǎo)致了這個(gè)問題，因?yàn)榻^對(duì)定位將元素從文檔流中移除。我的假設(shè)正確嗎？

當(dāng)我在下面的CSS中添加了相對(duì)于文本元素的position:時(shí)，我能夠獲得想要的外觀:

.card-content .text {
   ** position: relative; **
    font-size: .9em;
    text-align: left;
    height: 100px;
    overflow: hidden;
}

.card-content .text:before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to top, white, transparent)
}

然而，我不確定為什么這樣就解決了問題。這讓我想知道，一般來說，當(dāng)使用偽元素并對(duì)它們應(yīng)用絕對(duì)定位時(shí)，總是在原始元素上使用相對(duì)定位是否明智。如果有人能解釋一下，我將不勝感激。

下面是完整的HTML和CSS代碼供參考:

超文本標(biāo)記語言

<div class="card">
            <div class="card-img">
                <img src="imgs/img1.jpg" alt="">
            </div>
            <div class="card-content">
                <p class="text">
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                </p>
                <span class="see-more-btn"> See More </span>
            </div>
     </div>

半鑄鋼?鋼性鑄鐵(Cast Semi-Steel)

.card {
    position: relative;
    background: #fff;
    width: 350px;
    box-shadow: 0 5px 25px rgba(2, 2, 2, 0.25);
    border-radius: 10px;
    overflow: hidden;
}

.card .card-img {
    position: relative;
    width: 350px;
    height: 200px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.card .card-img img {
    width: 100%;
    height: 100%;
}

.card-content {
    position: relative;
    text-align: center;
    margin: 15px;
}

.card-content .text {
    **position: relative; **
    font-size: .9em;
    text-align: left;
    height: 100px;
    overflow: hidden;
}

.card-content .text:before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to top, blue, transparent)
}

如這里所提到的，絕對(duì)定位的元素相對(duì)于它最近的定位祖先定位，或者如果沒有這樣的祖先，它相對(duì)于& ltbody & gt元素。定位元素是具有除position: static之外的任何位置值的元素；，這是默認(rèn)值。要將非定位元素轉(zhuǎn)換為定位元素而不做任何其他更改，請(qǐng)將其樣式設(shè)置為position:relative；。

這種行為在所有元素中都是一致的，包括偽元素。

就你而言當(dāng)你的。文本元素沒有使用position: relative設(shè)置樣式；其絕對(duì)定位的子偽元素(漸變)相對(duì)于。card-content元素，這是其最近的定位祖先。因?yàn)樵撛匕摹Ｎ谋竞湍愕摹ee-more-btn，漸變最終會(huì)覆蓋兩者。

你做造型的時(shí)候。帶位置的文本:相對(duì)的；你的漸變是相對(duì)于。文本，因此它只涵蓋這一點(diǎn)。

另一個(gè)解決方案是允許梯度覆蓋所有。卡-內(nèi)容，但帶來。以z順序向前移動(dòng)see-more-btn，使其位于漸變的頂部。z指數(shù):9；應(yīng)該能行。請(qǐng)看這個(gè)片段，并排的卡片首先顯示問題，然后是你的解決方案，然后是我的解決方案。

.card {
    display: inline-block;
    position: relative;
    background: #fff;
    width: 170px;
    box-shadow: 0 5px 25px rgba(2, 2, 2, 0.25);
    border-radius: 10px;
    overflow: hidden;
    margin-right: 10px;
}

.card .card-img {
    position: relative;
    width: 100%;
    height: 200px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.card .card-img img {
    width: 100%;
    height: 100%;
}

.card-content {
    position: relative;
    text-align: center;
    margin: 15px;
}

.card-content .text {
    font-size: .9em;
    text-align: left;
    height: 100px;
    overflow: hidden;
}

.relative {
    position: relative;
}

.card-content .text::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to top, rgb(0,0,255,0.75), transparent)
}

.see-more-btn {
  background: #ff0000;
}
.in-front {
  position: relative;
  z-index: 9;
}

<div class="card">
  <div class="card-img">
    <img src="https://picsum.photos/500" alt="">
  </div>
  <div class="card-content">
    <p class="text">
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </p>
    <span class="see-more-btn"> See More </span>
  </div>
</div>

<div class="card">
  <div class="card-img">
    <img src="https://picsum.photos/500" alt="">
  </div>
  <div class="card-content">
    <p class="text relative">
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </p>
    <span class="see-more-btn"> See More </span>
  </div>
</div>

<div class="card">
  <div class="card-img">
    <img src="https://picsum.photos/500" alt="">
  </div>
  <div class="card-content">
    <p class="text">
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </p>
    <span class="see-more-btn in-front"> See More </span>
  </div>
</div>