不同角度的线性梯度答案

【问题标题】：linear-gradient on different angle不同角度的线性梯度
【发布时间】：2021-11-16 01:52:37
【问题描述】：

我想存档一个背景线性渐变（向右，从浅粉色到红色）并垂直淡出（到底部，到白色或不透明度为 0），但似乎不可能通过使用css 线性渐变。

background: linear-gradient(to left, rgba(224, 130, 131, 0.8), rgba(207, 0, 15, 0.8));

任何想法如何在不使用静态图像的情况下存档这种效果？

【问题讨论】：

淡出到底是什么意思？
这能回答你的问题吗？ CSS Gradients Inside Gradients
淡出为白色或不透明度为0
@tacoshy 它不一定是渐变中的渐变

标签： html css gradient linear-gradients

【解决方案1】：

你需要面具：

.box {
  height:100px;
  position:relative;
  border:1px solid;
}

.box:before {
  content:"";
  position:absolute;
  inset:0;
  -webkit-mask:linear-gradient(#000,#0000);
  background: linear-gradient(to left, rgba(224, 130, 131, 0.8), rgba(207, 0, 15, 0.8));
}

&lt;div class="box"&gt;&lt;/div&gt;

【讨论】：

非常接近我需要的，我可以设置从一半高度（50px）开始的淡出效果，我试过-webkit-mask:linear-gradient(#000 50px,#0000);，但结果有点不自然。跨度>
@RaxPat 不确定你所说的“不自然”是什么意思
jsfiddle.net/cv9kr7p0，中间好像有一条模糊的红线

【解决方案2】：

如果你想实现从浅粉色到红色的背景渐变，然后在底部淡出。

这可能会对你有所帮助。

.divX {
    position: relative;
    z-index: 0;
    background: linear-gradient(to right, rgba(224, 130, 131, 0.8), rgba(207, 0, 15, 0.8));
    /* Ignore these below */
    width: 100%;
    height: auto;
    min-height: 150px;
    }

.divX::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 1;
    background: linear-gradient(180deg, transparent, rgb(255 255 255));
}
.divXcontent {
    position: relative;
    z-index: 3; 
}

<div class="divX">
    <div class="divXcontent">
        <h1>test test</h1>
    </div>
</div>

然后在 .divX 中添加另一个 div 并将 position:relative 和 z-index 设置为 3，以使内容位于所有内容之上。

【讨论】：