仅从左侧进行渐变叠加的 CSS答案

【问题标题】：CSS for gradient overlay from only left side仅从左侧进行渐变叠加的 CSS
【发布时间】：2020-06-16 07:31:53
【问题描述】：

我正在尝试从左侧显示白色渐变叠加。线性渐变，从左到右。只有左侧是白色的，右侧是透明的。这可以用 css 实现吗？

【问题讨论】：

你应该展示一些你尝试过的东西，因为它是可能的
当然这是可能的。请记住，底层元素的背景颜色需要设置为白色以外的其他颜色才能真正看到它。毕竟你不能让你的显示器透明;）

【解决方案1】：

在 CSS 中是可能的，例如看这段代码 sn-p ：

body {
  background-color: #9999ff;
}

.bg-demo {
  background: linear-gradient(to right, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%);
}

<div class="bg-demo">
  <p>Don't mind me I'm just a very long text, like veeeery long ! I know I'm long right ? I know y'all know better my cousin Lorem Ipsum but hey ! Is he that long ? I don't think so ! Like I said, I am so long you probably won't ever find something as long as me.</p>
  <p>So anyways what is like being long ? It is much like being tall except on a much different axis. Also instead of growing up I am basically "longging left", right ? Just in case that wasn't obvious, I just did a joke, a short one. Yeah sure, that is quite interesting to have a short joke for a text as long as me</p>
</div

我的整个body 有一个蓝色背景，但我的.bg-demo div 有一个线性渐变，从左边开始，从白色到透明。

【讨论】：

【解决方案2】：

试试这个

background: linear-gradient(to bottom, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%);

这样做，您将在页面中从左到右设置白色透明渐变色

【讨论】：

请在您的答案中添加一些解释，以便其他人学习

【解决方案3】：

你可以试试这个。

background: rgba(255, 255, 255, 1);

background: -moz-linear-gradient(left, rgba(255, 255, 255, 1) 50%, rgba(246, 246, 246, 0.9) 72%, rgba(237, 237, 237, 0.78) 100%);

background: -webkit-gradient(left top, right top, color-stop(50%, rgba(255, 255, 255, 1)), color-stop(72%, rgba(246, 246, 246, 0.9)), color-stop(100%, rgba(237, 237, 237, 0.78)));

background: -webkit-linear-gradient(left, rgba(255, 255, 255, 1) 50%, rgba(246, 246, 246, 0.9) 72%, rgba(237, 237, 237, 0.78) 100%);

background: -o-linear-gradient(left, rgba(255, 255, 255, 1) 50%, rgba(246, 246, 246, 0.9) 72%, rgba(237, 237, 237, 0.78) 100%);

background: -ms-linear-gradient(left, rgba(255, 255, 255, 1) 50%, rgba(246, 246, 246, 0.9) 72%, rgba(237, 237, 237, 0.78) 100%);

background: linear-gradient(to right, rgba(255, 255, 255, 1) 50%, rgba(246, 246, 246, 0.9) 72%, rgba(237, 237, 237, 0.78) 100%);

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ededed', GradientType=1);

【讨论】：