Steigung: Halb Farbe halb transparant

Question

Ich habe diese Zeile Code

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

Wie Sie seine halb grau halb schwarz sehen. Gibt es eine Möglichkeit, den grauen Teil davon transparant zu machen, so ist, dann wäre es halb transparant halb schwarz sein ..

Vielen Dank im Voraus, Kevin

Answer 1

Sie können rgba() verwenden diese, wo die ersten drei Parameter zu erreichen ist die Farbe, die Sie (in Ihrem Fall 138, 138, 138) wollen, und der letzten Parameter ist die Opazität (in Ihrem Fall der 0 sein)

Ihnen ein Beispiel zu geben, wird Ihr Code in diesen drehen:

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

In diesem fiddle können Sie es in Aktion sehen

Hoffe, das hilft!

Answer 2

Versuchen Sie, diese

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%); 

Überprüfen Sie das Ergebnis

.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>