是否可以弯曲线性渐变 CSS？答案

【问题标题】：Is it possible to bend a linear gradient CSS?是否可以弯曲线性渐变 CSS？
【发布时间】：2018-01-04 19:10:24
【问题描述】：

我正在尝试使用 CSS 通过图像创建这个“旋风”。

http://imgur.com/a/wOyvk（无渐变）我曾尝试使用径向渐变来执行此操作，但是，当渐变接近中心时，我无法让渐变突然“关闭”。最好的方法是以某种方式弯曲线性渐变吗？

这就是我目前所拥有的，我不希望蓝色出现在角落里，我只想让渐变的“切片”沿着图像向下延伸。 https://jsfiddle.net/uh882Lcw/

HTML

<div class="banner-image">
  <div class="glint">

  </div>
</div>

CSS

.glint {
    background: radial-gradient(ellipse at center, rgba(0, 0, 255, 0.4) 0%, rgba(255, 255, 255, 0) 80%, rgba(255, 255, 255, 0) 100%);
    pointer-events: none;
    z-index: 1;
    position: absolute;
    top: -700px;
    left: 250px;
    width: 1300px;
    height: 1060px;
    border-radius: 100%;
}

.banner-image {
    overflow: hidden;
    background-image: url('http://via.placeholder.com/960x361');
    width: 960px;
    height: 361px;
    position: relative;
    }

【问题讨论】：

“我尝试过使用径向渐变”，请附上您尝试过的代码，因为它是合适的解决方案，听起来您很接近。

标签： css linear-gradients radial-gradients css-gradients

【解决方案1】：

您可以在背景图片上使用radial gradient。

.bg-img {
  width: 620px;
  height: 200px;
  background: radial-gradient(ellipse 800% 500% at 425% -25%, transparent 50%, rgba(0, 0, 255, 0.4) 50%, rgba(255, 255, 255, 0) 100%), url(http://lorempixel.com/620/200/animals);
}

&lt;div class="bg-img"&gt;&lt;/div&gt;

【讨论】：

有没有办法让渐变成为“切片”？看起来渐变仍在影响图像的右侧
你的意思是右边应该是透明的？
是的，我相信要实现这一点，我必须将原点设置在图像的右上角。

【解决方案2】：

如果我对您的理解正确，那么您只是希望该中心更透明一点。您可以调整百分比和透明度以获得您想要的效果。

.glint {
    background: radial-gradient(
      transparent 10%,
      rgba(255, 255, 255, .1) 80%);
    pointer-events: none;
    z-index: 1;
    position: absolute;
    top: -700px;
    left: 200px;
    width: 1300px;
    height: 1060px;
    border-radius: 100%;
}

.banner-image {
  overflow: hidden;
  background: url('http://i.imgur.com/OFFk8obg.png') no-repeat;
  background-size: cover;
  width: 700px;
  height: 361px;
  position: relative;
}

<div class="banner-image">
  <div class="glint"></div>
</div>

【讨论】：

【解决方案3】：

再试一次

我正在使用边框半径来限制受渐变影响的部分；我需要一个大于容器的 div 来实现正确的形状

.test {
  height: 400px;
  width: 1090px;
  border: solid 1px green;
  position: relative;
  overflow: hidden;
}

.test:after {
  content: "";
  width: 96%;
  height: 177%;
  right: -10%;
  bottom: 0px;
  position: absolute;
  border-bottom-left-radius: 1374px 876px;
  background-image: linear-gradient(to right, rgba(255,255,255,0.4), rgba(0,0,0,0.3));
}

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

【讨论】：