渐变：半色半透明

Question

我有这行代码

background:linear-gradient(341deg, #8a8a8a 0%, #8a8a8a 31.9%, #000 32.1%, #000 100%);

如你所见，它一半灰一半黑。有没有办法让它的灰色部分变成透明的，这样就一半透明一半黑色了..

提前致谢，凯文

Answer 1

您可以使用 rgba() 实现此目的，其中前 3 个参数是您想要的颜色（在您的情况下，138, 138, 138），最后一个参数是不透明度（在您的情况下，这将为 0)

举个例子，你的代码会变成这样：

background:linear-gradient(341deg, rgba(138,138,138,0)  0%, rgba(138,138,138,0)  31.9%, #000 32.1%, #000 100%);

在此fiddle您可以看到它的实际效果

希望对您有所帮助！

Answer 2

试试这个

background: linear-gradient(341deg, rgba(0, 0, 0, .33) 0%, rgba(0, 0, 0, .5) 31.9%, rgba(0, 0, 0, 1) 31.9%, rgba(0, 0, 0, 1) 100%);

检查结果

.original {
  background:linear-gradient(341deg, #8a8a8a  0%, #8a8a8a  31.9%, #000 32.1%, #000 100%);
}

.advice {
background: linear-gradient(341deg, rgba(0, 0, 0, .33) 0%, rgba(0, 0, 0, .5) 31.9%, rgba(0, 0, 0, 1) 31.9%, rgba(0, 0, 0, 1) 100%);
}

.original,
.advice,
.tree{
  height: 400px;
  width: 400px;
}

.tree {
  background-image: url('http://glebkema.ru/images/2015_09_20_iphone_155_x400.jpg'); 
}

<div class="tree"></div>
<div class="tree"><div class="original"></div></div>
<div class="tree"><div class="advice"></div></div>

渐变：半色半透明

Gradient: half color half transparant

css

gradient