使文本 "disappear" 的线性渐变

Question

我需要一些帮助。有几个容器里面有文字。明明有很多文字，所以必须有滚动条。但我不希望文本看起来像是被剪切过的，我想要 "blur" 单个容器的底部。

结果如下：https://jsfiddle.net/rsze93wk/3/

好吧，在我看来，它看起来……很糟糕。容器的底部应该几乎看不见，但我可以清楚地看到它。我使用 :after 和 display: block 来实现这种效果，所以我无法 select 该伪元素下的文本。

还有一个问题，向下滚动时渐变停留在一个地方。你能帮我解决这个问题吗？另外，也许你有什么想法可以让这个效果看起来更好？

Answer 1

I want to "blur" the bottom of the single container.

Blur 是 CSS 过滤器 (filter: blur(1))，您不能在此处将其与 after:: 伪元素一起使用，因为该元素的内容为空。

I used :after and display: block to make this effect, so I'm unable to select the text under that pseudo-element.

这是一个很好的通用解决方案。要使 after:: 下方的文本可点击，您可以将 pointer-events: none; 添加到 after::.

There is also a problem, gradient stays in one place when I scroll down.

after:: 应该定位到 .main 并且在 .main 中你应该有另一个带滚动条的容器。

Answer 2

^{更新：第一个片段在 Chrome 上似乎有问题，但在 Firefox}

上运行良好

您可以尝试使用如下渐变为文本着色：

body {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  margin: 0;
  height: 100vh;
}

.container {
  padding: 20px;
  border: 1px solid black;
}

.main:not(:first-child) {
  margin-top: 20px;
}

.main {
  width: 200px;
  height: 200px;
  box-shadow: 0px 0px 20px 1px rgba(0,0,0,0.75);
  overflow: auto;
  text-align: center;
  background: linear-gradient(#000 calc(100% - 50px),white);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

<div class="container">
<div class="main">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ex massa, vestibulum non quam quis, commodo fermentum purus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce in erat libero. Phasellus ipsum odio, rutrum porttitor velit a, venenatis cursus nisi. Donec venenatis, felis at luctus ullamcorper, leo nibh scelerisque orci, et pellentesque quam libero vel enim. Pellentesque a mauris nibh. Suspendisse eu laoreet nisi. Pellentesque bibendum ullamcorper iaculis. Nulla tortor odio, vehicula ac diam non, aliquet tristique sem.</p>

</div>

<div class="main">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ex massa, vestibulum non quam quis, commodo fermentum purus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce in erat libero. Phasellus ipsum odio, rutrum porttitor velit a, venenatis cursus nisi. Donec venenatis, felis at luctus ullamcorper, leo nibh scelerisque orci, et pellentesque quam libero vel enim. Pellentesque a mauris nibh. Suspendisse eu laoreet nisi. Pellentesque bibendum ullamcorper iaculis. Nulla tortor odio, vehicula ac diam non, aliquet tristique sem.</p>
</div>
</div>

另一种使用粘性的替代方法：

body {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  margin: 0;
  height: 100vh;
}

.container {
  padding: 20px;
  border: 1px solid black;
}

.main:not(:first-child) {
  margin-top: 20px;
}

.main {
  width: 200px;
  height: 200px;
  box-shadow: 0px 0px 20px 1px rgba(0,0,0,0.75);
  overflow: auto;
  text-align: center;
}
.main::after {
   content:"";
   display:block;
   height:200px;
   margin-top:-200px;
   position:sticky;
   bottom:0;
  background: linear-gradient(transparent calc(100% - 50px),white);
  pointer-events:none;
}

<div class="container">
<div class="main">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ex massa, vestibulum non quam quis, commodo fermentum purus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce in erat libero. Phasellus ipsum odio, rutrum porttitor velit a, venenatis cursus nisi. Donec venenatis, felis at luctus ullamcorper, leo nibh scelerisque orci, et pellentesque quam libero vel enim. Pellentesque a mauris nibh. Suspendisse eu laoreet nisi. Pellentesque bibendum ullamcorper iaculis. Nulla tortor odio, vehicula ac diam non, aliquet tristique sem.</p>

</div>

<div class="main">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ex massa, vestibulum non quam quis, commodo fermentum purus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce in erat libero. Phasellus ipsum odio, rutrum porttitor velit a, venenatis cursus nisi. Donec venenatis, felis at luctus ullamcorper, leo nibh scelerisque orci, et pellentesque quam libero vel enim. Pellentesque a mauris nibh. Suspendisse eu laoreet nisi. Pellentesque bibendum ullamcorper iaculis. Nulla tortor odio, vehicula ac diam non, aliquet tristique sem.</p>
</div>
</div>

如果您想要真正的模糊效果，请使用背景滤镜：

body {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  margin: 0;
  height: 100vh;
}

.container {
  padding: 20px;
  border: 1px solid black;
}

.main:not(:first-child) {
  margin-top: 20px;
}

.main {
  width: 200px;
  height: 200px;
  box-shadow: 0px 0px 20px 1px rgba(0,0,0,0.75);
  overflow: auto;
  text-align: center;
}
.main::after {
   content:"";
   display:block;
   height:20px;
   margin-top:20px;
   position:sticky;
   bottom:0;
  pointer-events:none;
  -webkit-backdrop-filter:blur(5px);
  backdrop-filter:blur(5px);
}

<div class="container">
<div class="main">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ex massa, vestibulum non quam quis, commodo fermentum purus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce in erat libero. Phasellus ipsum odio, rutrum porttitor velit a, venenatis cursus nisi. Donec venenatis, felis at luctus ullamcorper, leo nibh scelerisque orci, et pellentesque quam libero vel enim. Pellentesque a mauris nibh. Suspendisse eu laoreet nisi. Pellentesque bibendum ullamcorper iaculis. Nulla tortor odio, vehicula ac diam non, aliquet tristique sem.</p>

</div>

<div class="main">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ex massa, vestibulum non quam quis, commodo fermentum purus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce in erat libero. Phasellus ipsum odio, rutrum porttitor velit a, venenatis cursus nisi. Donec venenatis, felis at luctus ullamcorper, leo nibh scelerisque orci, et pellentesque quam libero vel enim. Pellentesque a mauris nibh. Suspendisse eu laoreet nisi. Pellentesque bibendum ullamcorper iaculis. Nulla tortor odio, vehicula ac diam non, aliquet tristique sem.</p>
</div>
</div>

使文本 "disappear" 的线性渐变

Linear gradient which make text "disappear"

css

linear-gradients

pseudo-element