CSS 线性不透明度答案

【问题标题】：CSS linear opacityCSS 线性不透明度
【发布时间】：2015-12-11 22:52:42
【问题描述】：

我想创建一些类似平面 UI 的块，但我需要一些帮助。我通过线性渐变（向左，rgba(255,255,255,0) ,rgba(255,255,255,1)) 完成了一些指南；等等，但我还没有找到我真正需要的东西。

有什么办法，如何做任何具有线性不透明度的图层？我有相当大的图像数据库，（所以我绝对不能对它们本身进行不透明的Photoshop处理），并且我将它作为背景图像加载到许多“div”中。但我需要让 div 在大约 75% 的宽度内开始变得透明。

在 CSS 中是否有可能？

有我需要达到的目标：

【问题讨论】：

标签： css

【解决方案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% 处具有不透明的黑色（前三个 rbga 值）背景，然后在其最右边的 25% 处线性过渡到透明。

【讨论】：

@Shomz：问题是“让 div 开始变得透明”，所以我不确定这是否会成为问题。在任何情况下，将图像或其他任何内容包装在额外的 div 中并使用 div 都是微不足道的。
是的，我已经尝试过了 ... style=\"background-image:linear-gradient(to right,rgba(0,0,0,1) 0%,rgba(0, 0,0,0) 75%), url("+item.header.thumb+");\ and style=\"background-image:url("+item.header.thumb+") , 线性渐变（向右,rgba(0,0,0,1) 0%,rgba(0,0,0,0) 75%) ;\" 两者都不起作用。正如我所说，我已经尝试谷歌它，打扰其他只有当 A 计划失败时，people 才是一个选项 :)（忽略斜线，它来自 Javascript）
我指的是"how to do any layer with linear opacity? I have quite huge database of images"，OP 使用带有背景图像的 div，只需要逐渐降低不透明度。
甚至扭曲到另一个 div，仍然是同一个问题。因为即使我制作了 div，其中扭曲了我的背景 div，线性渐变透明，它仍然只是背景，而不是 div 本身
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>合作

【解决方案2】：

恐怕这样的事情不可能使用 CSS。由于您有很多图像，并且您不会一次显示太多图像，您可以考虑使用canvas 为每张图像渲染不透明度：

http://jsfiddle.net/u256zkha/

【讨论】：

好吧，我会接受你的回答作为解决方案，也许它对其他人有用，但是......正如我在主帖中所说，我有很多。它是一个图片库 - 具体来说，图片从图库中标记为收藏。并且用户可以拥有很多......所以即使图片拇指只有大约 300x300 像素，我不太喜欢这里的“循环”。无论如何，感谢您的帮助和您的时间:)
是的，是的，我知道这是题外话，并且可能会在处理大量图像时表现不佳，但这是我能想到的唯一方法。当在画布上进行任何类型的图像处理时，for-cycle 是一个标准，它本身就很好，但正如我所说，随着图像数量的增加，问题可能会出现。别客气！ :)

【解决方案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>

【讨论】：