使文本“消失"的线性渐变会在屏幕上消失. [英] Linear gradient which make text "disappear"

问题描述

我需要一些帮助. 有一些内部有文本的容器.显然有很多文本，因此必须滚动.但是我不希望文本看起来像是被剪切掉，我想模糊"单个容器的底部.

I need some help. There are a few containers that have text inside. Obviously there is a lot of text, so there have to be scroll. But I don't want text look like it's cut, I want to "blur" the bottom of the single container.

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

好吧，看来...我认为很糟糕.容器的底部应该几乎是不可见的，但是我可以清楚地阅读它.我使用:after和display: block来实现此效果，因此无法选择该伪元素下的文本.

Well, it looks... pretty shitty in my opinion. The bottom of the container should be almost invisible, but I can clearly read it. I used :after and display: block to make this effect, so I'm unable to select the text under that pseudo-element.

还有一个问题，当我向下滚动时，渐变会停留在一个位置.你能帮我解决这个问题吗?另外，也许您有任何想法如何使这种效果看起来更好?

There is also a problem, gradient stays in one place when I scroll down. Can you help me solve this? Also, maybe you have any ideas how to make this effect look much better?

推荐答案

^{更新:第一个代码段似乎在Chrome上存在错误，但在Firefox上运行良好}

^{Update: the first snippet seems to be buggy on Chrome but works fine on Firefox}

您可以尝试使用如下所示的渐变为文本着色:

You can try to color the text using gradient like below:

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>

使用粘性的另一种选择:

Another alternative using sticky:

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>

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

And if you want a real blur effect use backdrop-filter:

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>

这篇关于使文本“消失"的线性渐变会在屏幕上消失.的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！