【发布时间】：2018-05-15 11:20:02
【问题描述】：
【问题讨论】：
-
我是如何通过 CSS 制作的？
-
请澄清您的具体问题或添加其他详细信息以准确突出您的需求。正如目前所写的那样，很难准确地说出你在问什么。
标签： css transparent linear-gradients
【发布时间】：2018-05-15 11:20:02
【问题描述】：
您添加的示例图片中的结果可以通过使用 2 个容器来实现，一个带有背景图像，另一个（位于第一个顶部）使用 CSS 渐变背景，其中一种渐变颜色具有alpha 为 0（即透明）。
有关 CSS 渐变的更多信息，请参阅：https://developer.mozilla.org/nl/docs/Web/CSS/CSS_Images/Using_CSS_gradients
要制作一侧透明的渐变，请使用 rgba 颜色，例如：
#grad1 {
height: 200px; width:500px;
background: linear-gradient(to right, rgba(255,0,0,1), rgba(255,0,0,0));
}
rgba 中的 a 代表 alpha，它是透明度 an 的值在 1（不透明）和 0（透明）之间
【讨论】：
-
它使用颜色渐变，而不是图像，我需要两层透明图像背景。它不是透明的，而是白色渐变