Gradient: половина цвет половина транспарант

Question

У меня есть эта строка кода

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

Как вы можете видеть его половину серого полутёмными. Есть ли способ, чтобы сделать серую часть этого транспарант, так, то это было бы половина транспарант наполовину черный ..

Заранее спасибо, Kevin

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>