Question 1

Quali funzioni CSS filter sono disponibili?

Accepted Answer

CSS filter supporta: blur, brightness, contrast, grayscale, hue-rotate, invert, opacity, saturate e sepia. Puoi combinare più filtri in una singola proprietà filter e vengono applicati nell'ordine elencato.

Question 2

La proprietà CSS filter influisce sulle prestazioni?

Accepted Answer

I filtri CSS sono accelerati dalla GPU nei browser moderni, ma blur intenso o più filtri sovrapposti possono influire sulle prestazioni di rendering, specialmente su mobile. Per le animazioni, usa will-change: filter per ottimizzare.

Question 3

Posso applicare filtri CSS solo allo sfondo (non agli elementi figlio)?

Accepted Answer

No, la proprietà filter si applica all'intero elemento inclusi i suoi figli. Per filtrare solo lo sfondo, usa backdrop-filter per un effetto glassmorphism, o isola lo sfondo in uno pseudo-elemento separato.

Question 4

Qual è la differenza tra filter: opacity() e la proprietà opacity?

Accepted Answer

Entrambi controllano la trasparenza, ma filter: opacity() usa l'accelerazione hardware e può essere combinato con altre funzioni filter. La proprietà opacity è più semplice e crea un nuovo contesto di impilamento. Per l'opacità sola, si preferisce generalmente la proprietà opacity.

Question 5

I filtri CSS possono essere usati su elementi SVG?

Accepted Answer

Sì. I filtri CSS si applicano agli elementi SVG così come agli elementi HTML. Inoltre, SVG ha i propri primitivi di filtro (feBlur, feColorMatrix, ecc.) che offrono un controllo più fine rispetto ai filtri CSS abbreviati.

Generatore Filtri CSS

Filtri

Domande Frequenti

Comments & Feedback