3

我正在尝试使用 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;
    }
4

3 回答 3

4

您可以在背景图像上使用径向渐变。

.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);
}
<div class="bg-img"></div>

于 2017-07-28T16:24:18.200 回答
0

再试一次

我正在使用边界半径来限制受渐变影响的部分；我需要一个大于容器的 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));
}
<div class="test"></div>

于 2017-07-28T18:47:14.003 回答
0

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

.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>

于 2017-07-28T17:02:22.743 回答