CSS mix-blend-mode
La proprietà CSS3 mix-blend-mode applica modalità di fusione tra elementi sovrapposti
Con mix-blend-mode, è possibile combinare visivamente due elementi sovrapposti applicando modalità di fusione grafiche come multiply, overlay o screen. Questa proprietà è spesso usata per effetti artistici, interfacce dinamiche e design avanzato.
Sintassi
Significato dei valori principali:
normal: Nessuna fusione, valore di default.multiply: I colori vengono moltiplicati, creando un effetto scuro.screen: Inverso del multiply, crea un effetto schiarente.overlay: Combinazione di multiply e screen.darken: Mantiene i colori più scuri.lighten: Mantiene i colori più chiari.difference,exclusion,color-dodge,color-burn, ecc.: Modalità avanzate per effetti speciali.
Esempio proprietà: mix-blend-mode
Codice Esempio: mix-blend-mode
.blend-text {
mix-blend-mode: overlay;
background-color: rgba(255, 255, 255, 0.4);
color: white;
font-size: 32px;
display: flex;
align-items: center;
justify-content: center;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
Contenuto Esempio: mix-blend-mode
Esempio di utilizzo di mix-blend-mode
In questo esempio, un testo sovrapposto a un'immagine utilizza la modalità di fusione overlay per creare un effetto visivo integrato:
CSS e HTML per l'esempio con mix-blend-mode:
<style>
.blend-container {
position: relative;
width: 400px;
height: 250px;
}
.blend-background {
background: url('https://images.unsplash.com/photo-1507525428034-b723cf961d3e') center/cover no-repeat;
width: 100%;
height: 100%;
}
.blend-text {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
color: white;
font-size: 32px;
display: flex;
align-items: center;
justify-content: center;
mix-blend-mode: overlay;
background-color: rgba(255, 255, 255, 0.4);
}
</style>>
<div class="blend-container">
<div class="blend-background"></div>
<div class="blend-text">Effetto di fusione overlay</div>
</div>
Note:
Le indicazioni dei Browser supportati sono superate grazie alla loro costante evoluzione, si consiglia di verificare la compatibilità dei vari browser eseguendo il test cliccando qui sotto.
Supporto Browser
IP: 216.73.216.108
