我有一些具有长基本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的话会更好）。
答案 0 :(得分：4)
将jdbc:oracle:thin:@<hostname>:<port>:<service> CSS样式添加到渐变元素中。
它完全按照它的声音 - 渐变元素将不再接受指针事件，它们将落入下面的元素。
pointer-events: none;.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%);
pointer-events: none;
}