1
我有一些具有長基本HMTL內容的可擴展面板（img,a,strong ...），我想在它們摺疊時將它們裁剪到某個最大高度將內容淡入背景顏色。將文本淡入透明並帶有功能鏈接
這是怎麼現在做的是正確的，現在（和正確的視覺效果我預計）：
.collapsed {
max-height: 150px; /* Magic number for demo purposes */
overflow: hidden;
position: relative;
}
.collapsed::after { /* Gradient glass layer */
display: block;
position: absolute;
content: "";
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(to bottom, rgba(255,255,255,0) 50%, rgba(255,255,255,1) 100%);
}<div class="collapsed panel">
<p>Lorem ipsum dolor sit amet, <a href="#">consectetur adipiscing</a> elit. Cras consectetur augue ut ligula tincidunt, vitae suscipit est aliquam. Vivamus ut efficitur odio. Donec non velit sit amet odio aliquam tempus.</p>
<p>Vestibulum luctus eros eu ligula sodales rhoncus. <a href="#">Nulla vel porttitor lacus</a>. Praesent malesuada varius sem at ullamcorper. Interdum et <a href="#">malesuada fames ac ante</a> ipsum primis in faucibus. Fusce gravida pulvinar dapibus. Nam faucibus diam non nulla fermentum, in aliquam augue dictum. Maecenas sed lorem bibendum, tincidunt quam ut, vulputate quam.</p>
<p>Maecenas malesuada eros ipsum, vel pellentesque ante consequat vitae. <a href="#">Phasellus egestas</a> aliquet felis, id condimentum neque fermentum a. Nunc porta viverra libero sit amet viverra. Ut consectetur ac ex in egestas. Integer vitae nulla faucibus, pulvinar felis eu, placerat nibh.</p>
<p>Morbi semper vel odio et blandit. Proin blandit magna at euismod egestas. Suspendisse laoreet arcu tortor, vel efficitur nulla malesuada nec. Etiam porttitor lacus sit amet magna tempor, non interdum nisl iaculis. Etiam quis porta orci. Quisque sit amet lectus ac neque accumsan luctus. Donec luctus, ipsum id elementum rutrum, diam ipsum fringilla velit, quis posuere lacus tortor nec quam. Phasellus ultricies enim quis turpis varius, scelerisque ultricies nisi rutrum. Sed dapibus malesuada sapien a gravida. Curabitur porta malesuada felis, at tincidunt sapien finibus consequat. Etiam at viverra nisi, id dignissim est. Integer eu felis id sem finibus congue.</p>
</div>這種方法的問題在於，鏈接無法點擊，因爲有此梯度玻璃（.collapsed::after）層以上的真實內容。
我嘗試了兩種方法來解決這個問題，但他們都不是可以接受的，我...
- 第一種是把玻璃上述鏈接。這樣，鏈接是可點擊的，但它們不受漸變的影響，我希望它們是。
.collapsed {
max-height: 150px; /* Magic number for demo purposes */
overflow: hidden;
position: relative;
}
.collapsed::after { /* Gradient glass layer */
display: block;
position: absolute;
content: "";
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(to bottom, rgba(255,255,255,0) 50%, rgba(255,255,255,1) 100%);
}
a {
position: relative;
z-index: 1;
}<div class="collapsed panel">
<p>Lorem ipsum dolor sit amet, <a href="#">consectetur adipiscing</a> elit. Cras consectetur augue ut ligula tincidunt, vitae suscipit est aliquam. Vivamus ut efficitur odio. Donec non velit sit amet odio aliquam tempus.</p>
<p>Vestibulum luctus eros eu ligula sodales rhoncus. <a href="#">Nulla vel porttitor lacus</a>. Praesent malesuada varius sem at ullamcorper. Interdum et <a href="#">malesuada fames ac ante</a> ipsum primis in faucibus. Fusce gravida pulvinar dapibus. Nam faucibus diam non nulla fermentum, in aliquam augue dictum. Maecenas sed lorem bibendum, tincidunt quam ut, vulputate quam.</p>
<p>Maecenas malesuada eros ipsum, vel pellentesque ante consequat vitae. <a href="#">Phasellus egestas</a> aliquet felis, id condimentum neque fermentum a. Nunc porta viverra libero sit amet viverra. Ut consectetur ac ex in egestas. Integer vitae nulla faucibus, pulvinar felis eu, placerat nibh.</p>
<p>Morbi semper vel odio et blandit. Proin blandit magna at euismod egestas. Suspendisse laoreet arcu tortor, vel efficitur nulla malesuada nec. Etiam porttitor lacus sit amet magna tempor, non interdum nisl iaculis. Etiam quis porta orci. Quisque sit amet lectus ac neque accumsan luctus. Donec luctus, ipsum id elementum rutrum, diam ipsum fringilla velit, quis posuere lacus tortor nec quam. Phasellus ultricies enim quis turpis varius, scelerisque ultricies nisi rutrum. Sed dapibus malesuada sapien a gravida. Curabitur porta malesuada felis, at tincidunt sapien finibus consequat. Etiam at viverra nisi, id dignissim est. Integer eu felis id sem finibus congue.</p>
</div>.collapsed {
max-height: 150px; /* Magic number for demo purposes */
overflow: hidden;
background: linear-gradient(180deg, rgba(0,0,0,1) 20%, rgba(255,255,255,0) 95%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
a {
color: blue;
text-decoration: underline;
}<div class="collapsed panel">
<p>Lorem ipsum dolor sit amet, <a href="#">consectetur adipiscing</a> elit. Cras consectetur augue ut ligula tincidunt, vitae suscipit est aliquam. Vivamus ut efficitur odio. Donec non velit sit amet odio aliquam tempus.</p>
<p>Vestibulum luctus eros eu ligula sodales rhoncus. <a href="#">Nulla vel porttitor lacus</a>. Praesent malesuada varius sem at ullamcorper. Interdum et <a href="#">malesuada fames ac ante</a> ipsum primis in faucibus. Fusce gravida pulvinar dapibus. Nam faucibus diam non nulla fermentum, in aliquam augue dictum. Maecenas sed lorem bibendum, tincidunt quam ut, vulputate quam.</p>
<p>Maecenas malesuada eros ipsum, vel pellentesque ante consequat vitae. <a href="#">Phasellus egestas</a> aliquet felis, id condimentum neque fermentum a. Nunc porta viverra libero sit amet viverra. Ut consectetur ac ex in egestas. Integer vitae nulla faucibus, pulvinar felis eu, placerat nibh.</p>
<p>Morbi semper vel odio et blandit. Proin blandit magna at euismod egestas. Suspendisse laoreet arcu tortor, vel efficitur nulla malesuada nec. Etiam porttitor lacus sit amet magna tempor, non interdum nisl iaculis. Etiam quis porta orci. Quisque sit amet lectus ac neque accumsan luctus. Donec luctus, ipsum id elementum rutrum, diam ipsum fringilla velit, quis posuere lacus tortor nec quam. Phasellus ultricies enim quis turpis varius, scelerisque ultricies nisi rutrum. Sed dapibus malesuada sapien a gravida. Curabitur porta malesuada felis, at tincidunt sapien finibus consequat. Etiam at viverra nisi, id dignissim est. Integer eu felis id sem finibus congue.</p>
</div>這種方法（除了是不太兼容）去除鏈接的風格，我不喜歡/想，要麼...
所以，我不知道是否有人想出了這個很好的解決（如果是純CSS，效果會更好）。