CSS - 图像两侧的线性渐变透明度

Question

简短版

如何在CSS中使用-webkit-linear-gradient在图像的左侧和右侧添加透明度？

详细版

我想在图像的两侧上添加透明度，只使用纯CSS避免使用任何图像编辑器，例如Photoshop，Gimp等。我尝试使用-webkit-linear-gradient，但它使用rgba()函数来定义颜色停止点。

因此，这段代码

height: 200px;
background: -webkit-linear-gradient(left, rgba(255,0,0,0), rgba(255,0,0,1));

这是什么：

在这个例子中，rgba() 函数中的最后一个参数定义了颜色的透明度。目前为止一切正常。如果我在 -webkit-linear-gradient 中加入 right，则上面的图像将显示相反的效果。 （你说呢？！）

我想以某种方式将两者合并，并创建一个从两边透明的渐变。只是不用渐变，用一张图片。

我还尝试使用 box-shadow 和 radial-gradient，但无法弄清楚。

有没有可能只使用 CSS 在图像的左侧和右侧添加透明度？

编辑：

例如：

- balintpekker

---

我不确定我完全理解了...你只是想要三个颜色停止点吗？ - BoltClock

不，我想要一张图像两侧淡出到透明。 - balintpekker

没关系，我懂了。顺便说一下，线性渐变已经标准化，并且使用不同于你现在正在使用的语法。 - BoltClock

我在上方添加了一个示例。如果不使用-webkit-linear-gradient，那么还有其他的方法吗？ - balintpekker

Answer 1

你可以使用包装 div，然后使用颜色停止：

div {
  position: relative;
  display: inline-block;
}
div:before {
  content: "";
  top: 0;
  left: 0;
  position: absolute;
  height: 100%;
  width: 100%;
  background: -moz-linear-gradient(left, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 49%, rgba(255, 255, 255, 1) 100%);
  /* FF3.6+ */
  background: -webkit-gradient(linear, left top, right top, color-stop(0%, rgba(255, 255, 255, 1)), color-stop(49%, rgba(255, 255, 255, 0)), color-stop(100%, rgba(255, 255, 255, 1)));
  /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(left, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 49%, rgba(255, 255, 255, 1) 100%);
  /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(left, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 49%, rgba(255, 255, 255, 1) 100%);
  /* Opera 11.10+ */
  background: -ms-linear-gradient(left, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 49%, rgba(255, 255, 255, 1) 100%);
  /* IE10+ */
  background: linear-gradient(to right, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 49%, rgba(255, 255, 255, 1) 100%);
  /* W3C */
  filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ffffff', GradientType=1);
  /* IE6-9 */
}

<div>
  <img src="http://placekitten.com/g/300/300" alt="" />
</div>

---

资源

---

• 1 * 渐变生成器

---

- jbutler483

---

太棒了。感谢你的帮助！ - balintpekker

@balintpekker：没问题，很高兴能帮到你。 - jbutler483

天啊，兄弟，谁会在代码行下面留评论呢？开个玩笑，感谢你的回答。 - ModusPwnens

Answer 2

晚回答，但其他人可以利用它。您只需一行代码就可以在两侧添加带有透明度的渐变：

background: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(255, 0, 0, 1), rgba(0, 0, 0, 0))

- Ajeeli

Answer 3

使用 mask-image 和 -webkit-mask-image 属性，而不是 background 属性：

img
{
  mask-image: /*same as -webkit-mask-image*/
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%);
}

上面的代码在0、10、90和100%处设置颜色停止，使任何img标签的两侧各留下10%半透明。 mask-image属性仅使用alpha通道，您可以为不透明部分使用任何颜色。

- sisisisi

Answer 4

.image {
  position: relative;
}

.image::after {
    position: absolute;
    top:0;
    left: 0;
    right: 0;
    bottom: 0;
    content: '';
    display: block;
    background-image: linear-gradient(to right, currentColor 5%, transparent 30%);
  }

.image::before {
    position: absolute;
    top:0;
    left: 0;
    right: 0;
    bottom: 0;
    content: '';
    display: block;
    background-image: linear-gradient(to left, currentColor 5%, transparent 30%);
  }

<div class="image">
  <img src="http://placekitten.com/800/400"/>
</div>

我发现一种方法是使用伪类并将它们堆叠在一起。确保图像容器相对定位，这样就可以为您工作（请参见示例）。

- JimRush

Answer 5

.image {
  position: relative;
}

.image::after {
    position: absolute;
    top:0;
    left: 0;
    right: 0;
    bottom: 0;
    content: '';
    display: block;
    background-image: linear-gradient(to right, currentColor 5%, transparent 30%);
  }

.image::before {
    position: absolute;
    top:0;
    left: 0;
    right: 0;
    bottom: 0;
    content: '';
    display: block;
    background-image: linear-gradient(to left, currentColor 5%, transparent 30%);
  }

<div class="image">
  <img src="http://placekitten.com/800/400"/>
</div>

- Yarraballi Kumar Reddy