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

CSS - Linear gradient transparency on both side of image

提问by balintpekker

tl;dr

tl;博士

Is there any way to add transparency to images in CSS with -webkit-linear-gradienton left, and right side of the image?

有没有办法在图像的-webkit-linear-gradient左侧和右侧为CSS 中的图像添加透明度？

Long Version

长版

I have an image I want to add transparency - with pure CSS - on both side of it avoiding using any image editor like Photoshop, Gimp, etc. I have tried to use -webkit-linear-gradientbut it uses rgba() function to define color stops.

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

So this snippet

所以这个片段

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

does this:

做这个：

In this example the last parameter in the rgba() defines the transparency of the color. So far so good. If I put rightin the -webkit-linear-gradientthe image above would show the opposite. (You don't say?!)

在这个例子中，rgba() 中的最后一个参数定义了颜色的透明度。到现在为止还挺好。如果我把right在-webkit-linear-gradient图像上方会显示相反。（你不说？！）

I want somehow to merge the two, and create a gradient that goes to transparent on both side. Only not with gradient. With an image.

我想以某种方式将两者合并，并创建一个两边都透明的渐变。只是没有渐变。带有图像。

I also tried to work around with box-shadowand radial-gradientbut I couldn't figure it out.

我也试图解决与box-shadow和radial-gradient，但我无法弄清楚。

Is there any possible way to add transparency on left, and right side of an image using only CSS?

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

EDIT:

编辑：

Example:

例子：

回答by jbutler483

You could use a wrapper div and then use color stops:

您可以使用包装 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>

---

---

Resources

资源

---

---

• 1 * Gradient Generator

• 1 * 梯度发生器

回答by JimRush

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

One way I've found to do this is to use pseudo classes and to stack them on top of each other. Make sure that the image container is relatively positioned and it should work for you (see example).

我发现这样做的一种方法是使用伪类并将它们堆叠在一起。确保图像容器相对定位并且它应该适合您（参见示例）。

回答by sisisisi

Use the mask-imageand -webkit-mask-imageproperty, not background:

使用mask-imageand-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%);
}

The above code puts color stops at 0, 10, 90, and 100 percent, leaving 10% of each side of any imgtag semi-transparent. The mask-imageproperty only uses the alpha channel, you can use any color you want for the non-transparent parts.

上面的代码在 0%、10%、90% 和 100% 处设置颜色停止点，让任何img标签的每一侧的 10% 保持半透明。该mask-image属性仅使用 alpha 通道，您可以为非透明部分使用任何您想要的颜色。