CSS线性不透明度

Question

我想创建一些扁平化UI风格的块，但我需要一点帮助。我已经看了一些指南，使用线性渐变（to left, rgba(255,255,255,0) ,rgba(255,255,255,1));等等，但我没找到我真正需要的东西。

有没有什么方法可以使用线性不透明度来创建任何图层？我有一个相当庞大的图像数据库（所以我肯定不能通过Photoshop使它们本身透明），我将其加载到许多“div”中作为背景图像。但是我需要让这些div在大约75％的宽度处开始变得透明。

在CSS中是否有可能实现？

这就是我需要实现的：

- Zorak

Answer 1

您可以设置一个线性渐变背景，增加一个额外的停止点，使元素在宽度的75％处透明，然后逐渐增加不透明度。

例如：

background: linear-gradient(
   to right, 
   rgba(0,0,0,1) 0%,
   rgba(0,0,0,1) 75%,
   rgba(0,0,0,0) 100%
);

这会使元素在其宽度的75%处具有不透明的黑色背景（前三个rgba值），然后在其最右侧的25%中线性过渡到透明。

- Jon

---

是的，我已经尝试过了... style="background-image:linear-gradient(to right,rgba(0,0,0,1) 0%,rgba(0,0,0,0) 75%), url("+item.header.thumb+");\ 和 style="background-image:url("+item.header.thumb+") , linear-gradient(to right,rgba(0,0,0,1) 0%,rgba(0,0,0,0) 75%) ;" 都不起作用。正如我所说，我已经尝试通过谷歌搜索解决方法，如果计划A失败了，才会考虑打扰别人 :)（忽略斜杠，这是来自JavaScript） - Zorak

即使将其包装到另一个 div 中，问题仍然存在。因为即使我将包含背景的 div 设为线性渐变透明，它仍然只是背景，而不是 div 本身。 - Zorak

aaand zep .. 不支持 <div style=\"background:linear-gradient(to right,rgba(0,0,0,1) 0%,rgba(0,0,0,0) 75%),\"><div class=\"favItemFoto\" style=\"background-image:url("+item.header.thumb+");\"></div></div>。 - Zorak

@Zorak 或许我误解了问题？一个示例图形会澄清事情。 - Jon

@jcaron，不行，我试过两种方法了，梯度div插入BG div，大小相同，没有效果。梯度div覆盖在BG div上，也是一样。 - Zorak

Answer 2

很抱歉，使用CSS无法实现此类功能。由于您有许多图像，并且只要不同时显示太多图像，您可以考虑使用canvas将不透明度渲染到每个图像中：

http://jsfiddle.net/u256zkha/

- Shomz

---

好的，我会接受您的答案作为解决方案，也许对其他人有用，但是……正如我在主贴中所说的，我有很多这样的情况。这是一个图库-具体来说，用户可以选择图库中标记为收藏的图片，并且用户可能有很多这样的图片……所以即使缩略图只有大约300x300像素，我在这里不太喜欢那个"for循环"。无论如何，感谢您的帮助和时间 :) - Zorak

是的，我知道这与主题无关，并且在处理大量图像时可能表现不佳，但这是我能想到的唯一方法。那个for循环在画布上进行任何类型的图像操作时都是标准的，它本身很好，但正如我所说，随着图像数量的增加，问题可能会出现。不用谢！ :) - Shomz

Answer 3

使用linear-gradient，部分内容来自Jon的回答。

#parent{
  position:relative;
  width:fit-content;
}
#layer{
  position:absolute;
  width:100%;
  height:100%;
  background: linear-gradient(
   to right, 
   rgba(0,0,0,1) 0%,
   rgba(0,0,0,1) 0%,
   rgba(0,0,0,0) 100%
);
}

<div id="parent">
  <div id="layer"></div>
  <img src="https://www.gravatar.com/avatar/0fdacb141bca7fa57c392b5f03872176?s=356&d=identicon&r=PG&f=1"/>
</div>

- Spectric