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>

渐变：半透半透明

2 个答案: