Gradiente con dissolvenza in CSS

La mia domanda riguarda il gradiente con dissolvenza: gradiente - dall'alto verso il basso e dissolvenza - da sinistra a destra.Gradiente con dissolvenza in CSS

Esempio:

Il codice è:

background-image: 
    linear-gradient(0deg, rgba(198,83,165,.95) 0%, rgba(198,86,51,.95) 100%), 
    linear-gradient(90deg, transparent 50%, rgba(0,0,0,.95) 100%); 
opacity: 0.949;

Il mio risultato è al di sotto.

Come si vede, non sbiadisce il gradiente, sembra livello separato, dietro a questo gradiente. C'è qualche altro metodo per implementarlo?

fonte

2016-01-16 Nursultan Bagidolla

Trasparente mostrerà solo il livello dietro (che è quello con il colore) e quindi questo approccio non funzionerà. Dovrai usare un altro modo – Harry

Come ho menzionato nei commenti, quando si aggiunge un livello trasparente sopra un altro gradiente, verrà visualizzato solo attraverso il livello sfumato colorato che si trova sotto di esso (e non l'immagine che è presente nel contenitore). Quindi, sarebbe molto difficile (quasi impossibile) ottenere questo con gradienti.

Dovresti utilizzare un'immagine maschera per realizzarla. Di seguito è riportato uno snippet che utilizza una maschera SVG .

div { 
 
    position: relative; 
 
    height: 300px; 
 
    width: 500px; 
 
} 
 
div svg { 
 
    position: absolute; 
 
    height: 100%; 
 
    width: 100%; 
 
} 
 
div .grad-fill { 
 
    fill: url(#grad); 
 
    mask: url(#masker); 
 
}

<div> 
 
    <svg viewBox="0 0 500 300" preserveAspectRatio="none"> 
 
    <defs> 
 
     <linearGradient id="grad" gradientUnits="objectBoundingBox" gradientTransform="rotate(270,0.5,0.5)"> 
 
     <stop offset="0%" stop-color="rgba(198,83,165,.95)" /> 
 
     <stop offset="100%" stop-color="rgba(198,86,51,.95)" /> 
 
     </linearGradient> 
 
     <linearGradient id="mask-grad" gradientUnits="objectBoundingBox"> 
 
     <stop offset="40%" stop-color="black" /> 
 
     <stop offset="100%" stop-color="white" /> 
 
     </linearGradient> 
 
     <mask id="masker" x="0" y="0" width="500" height="300"> 
 
     <rect x="0" y="0" width="500" height="300" fill="url(#mask-grad)" /> 
 
     </mask> 
 
    </defs> 
 
    <rect x="0" y="0" width="500" height="300" class="grad-fill" /> 
 
    </svg> 
 
    <img src="http://lorempixel.com/500/300/animals/8" /> 
 
</div>

Potete trovare ulteriori informazioni su maschere SVG nel link qui sotto:

Questo può essere fatto anche con CSS puro ma sfortunatamente mask-image property is currently supported only by WebKit browsers e quindi questo approccio non è raccomandato.

div { 
 
    position: relative; 
 
    height: 300px; 
 
    width: 500px; 
 
    color: white; 
 
} 
 
div:after, 
 
img { 
 
    position: absolute; 
 
    height: 100%; 
 
    width: 100%; 
 
    top: 0px; 
 
    left: 0px; 
 
    z-index: -1; 
 
} 
 
div:after { 
 
    content: ''; 
 
    background-image: linear-gradient(0deg, rgba(198, 83, 165, .95) 0%, rgba(198, 86, 51, .95) 100%); 
 
    -webkit-mask-image: linear-gradient(90deg, transparent 40%, rgb(0, 0, 0) 100%); 
 
}

<div>Some text 
 
    <img src="http://lorempixel.com/500/300/animals/8" /> 
 
</div>

fonte

2016-01-16 08:29:34 Harry

Posso vedere il gradiente nell'ultimo snippet, ma non riesco a vedere 'Abcd'. Dove è andata? –

Mi piace quando dici che qualcosa sarebbe quasi impossibile! – vals

Bel tentativo @vals ma non penso che produca lo stesso effetto. Ma sì, con CSS e gradienti, quello è il più vicino che si possa ottenere. – Harry

È ancora possibile utilizzare il gradiente verticale per lo sfondo colorato, ma utilizzare la maschera png per lo sbiadimento.

Guardate questi esempi di utilizzo di maschere PNG: https://css-tricks.com/clipping-masking-css/

Il resto è abbastanza semplice.

fonte

2016-01-16 08:18:21

Un modo per creare questo effetto con CSS puro è quello di giocare con più sfumature radiali, e con la trasparenza di ogni

dietro i gradienti radiali, che sono abbastanza trasparenti per consentire loro di sfumare tra di loro, c'è un gradiente lineare che fornisce opacità (in bianco) sul lato destro.

Se si desidera che questo sia più preciso, è possibile impostare più gradienti radiali, ciascuno dei quali copre una parte dell'immagine.

.test { 
 
    width: 500px; 
 
    height: 400px; 
 
    border: solid 1px green; 
 
    background: 
 
    radial-gradient(ellipse 70% 100% at top right, rgba(255,0,0,0.5), transparent), 
 
       radial-gradient(ellipse 70% 100% at bottom right, rgba(255,0,80,0.5), transparent), 
 
       linear-gradient(to left, white 20%, transparent); 
 
    background-size: 100% 80%, 100% 80%, 100% 100%; 
 
    background-position: top left, left 100%, top left; 
 
    background-repeat: no-repeat; 
 
} 
 

 
body { 
 
    background-image: url(http://lorempixel.com/500/400/nature); 
 
    background-repeat: no-repeat; 
 
    background-position: 8px 8px; 
 
}

<div class="test"></div>

fonte

2016-01-16 09:02:14 vals

Un altro modo potrebbe usare un PNG per il gradiente in uno sfondo con background-size: contain.

Vantaggio:

opere su tutti i browser (non < = IE8)

disagi:

hanno bisogno editor di immagini per modificare i colori
il PNG potrebbe essere pesante (dipende dalle sue dimensioni)
non si controlla molto bene il modo in cui il gradiente viene applicato

.test > div { 
 
    background: url('data:image/png;base64,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'); 
 
    background-size: contain; 
 
    width: 300px; 
 
    height: 150px; 
 
} 
 

 
.test p { 
 
    color: #fff; 
 
    font-weight: bold; 
 
    text-align: right; 
 
    margin: 10px; 
 
} 
 

 
.test { 
 
    width: 300px; 
 
    height: 150px; 
 
    background: url(http://lorempixel.com/300/150/nature) no-repeat; 
 
}

<div class="test"> 
 
    <div> 
 
    <p>Lorem ipsum</p> 
 
    </div> 
 
</div>

(sto usando un'immagine base64 immagine file PNG invece di non dover cercare un server , ma ovviamente funziona bene con un'immagine di file)

fonte

2016-01-17 11:17:05 Derwoed

risposta

Problemi correlati