【发布时间】：2020-07-18 11:49:50
【问题描述】：
问题陈述：
您好，我想使用纯 CSS 从左右边缘淡出 div 及其内容。 目前，我可以根据对堆栈溢出问题的回答来实现这一点。
代码：
.container {
height: 234px;
width: 234px;
overflow: scroll;
mask-image: linear-gradient(transparent,
black 20%,
black 80%,
transparent 100%);
-webkit-mask-image: linear-gradient(transparent,
black 20%,
black 80%,
transparent 100%);
}
.container::-webkit-scrollbar {
display: none;
} <div class="container">
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Impedit
dolorem libero, dolor, fuga illo nobis rem ipsam ipsa
perferendis dolore autem fugiat! Dicta eius repellendus totam
qui maiores odio a! Lorem ipsum dolor sit amet consectetur
adipisicing elit. Impedit dolorem libero, dolor, fuga illo nobis
rem ipsam ipsa perferendis dolore autem fugiat! Dicta eius
repellendus totam qui maiores odio a! Lorem ipsum dolor sit amet
consectetur adipisicing elit. Impedit dolorem libero, dolor,
fuga illo nobis rem ipsam ipsa perferendis dolore autem fugiat!
Dicta eius repellendus totam qui maiores odio a! Lorem ipsum
dolor sit amet consectetur adipisicing elit. Impedit dolorem
libero, dolor, fuga illo nobis rem ipsam ipsa perferendis dolore
autem fugiat! Dicta eius repellendus totam qui maiores odio a!
Lorem ipsum dolor sit amet consectetur adipisicing elit. Impedit
dolorem libero, dolor, fuga illo nobis rem ipsam ipsa
perferendis dolore autem fugiat! Dicta eius repellendus totam
qui maiores odio a! Lorem ipsum dolor sit amet consectetur
adipisicing elit. Impedit dolorem libero, dolor, fuga illo nobis
rem ipsam ipsa perferendis dolore autem fugiat! Dicta eius
repellendus totam qui maiores odio a!
</p>
</div>我怎样才能使线性渐变使左右边缘消失而不是顶部和底部？
另外：这种语法非常简洁，但我不明白传递给 linear-gradient 的参数如何能够指定仅从顶部和底部淡化容器，并将其余部分保留为它是。简而言之，我们没有指定任何方向，例如 to-top 和 to-bottom 那么这实际上是如何工作的？
注意：我知道这个问题与this 重复。但是在问题上指定的the answer 并不能解决我的用例，因为它不会淡出 div 的内部内容。
谢谢！ :)
【问题讨论】：
-
将文本放入p中，然后将p放入带有“width:tot px;”的div中position: relative”，并将 div::after 和 div::before 定位为“content”；位置：绝对；顶部/底部：0px； left:0 right:0”，然后给那些添加阴影（对不起，我在手机上，所以我无法做出严格的回答）
-
你可以在这里问：stackoverflow.com/questions/62678236/… .. 你已经在那里得到了答案
-
我不想在选择器前后使用。
-
@TemaniAfif 是的，我本可以，但是，我可能不得不编辑问题和东西。与新问题相比，已编辑问题的受众较少。纠正我，如果我的想法是错误的:)
-
不需要编辑问题，你问回答的人。你甚至没有评论我的回答，我可以在 2 秒内轻松地从左到右
标签： javascript html css reactjs redux