Tot el que heu de saber sobre l’opacitat a CSS

Aquest article us presentarà un concepte que us ajudarà a entendre l’opacitat i us expliquem com controlar aquest paràmetre. Les següents indicacions es tractaran en aquest article,

• Opacitat en CSS
• Opacitat heretada amb elements en cascada
• Configuració de l'atribut RGBA per a elements en cascada
• Canvis d'opacitat en l'efecte de vol

L'opacitat de fons d'un element és una opció útil per al disseny HTML. En establir el nivell d’opacitat (invers de transparència), un dissenyador pot controlar la visibilitat de l’element a través de la propietat d’opacitat CSS. Normalment s'utilitza com a configuració de fons quan hi ha elements en cascada, situats un sobre l'altre.

diferència php entre eco i print

L'escenari més comú en què s'utilitza aquesta característica és el següent:

• Una imatge de fons parcialment transparent es col·loca darrere d’un element de text.
• La imatge de fons és visiblement visible, de manera que no domina el text del davant.
• La imatge pot centrar-se al màxim quan l'usuari tria explícitament veure-la.

És possible que vulgueu llegir a abans d’aprendre sobre l’opacitat CSS.

Per obtenir un tutorial complet de CSS, visiteu Tutorial Edureka CSS per a principiants . Vostè obtindrà un excel·lent avenç sobre la manera com CSS s'ha d'utilitzar per augmentar el disseny web HTML.

Continuem amb aquest article sobre l’opacitat a CSS

Opacitat en CSS

A CSS, l'opacitat es defineix com un valor numèric que oscil·la entre 0,0 i 1,0. Els valors més propers al zero representen més transparència, la imatge tindrà una visibilitat molt clara. Comencem amb un exemple d’imatge que es mostra amb un 50% de transparència. Vegeu l'exemple 1 a continuació.

Exemple 1: imatge de fons configurada a semi- transparència

img {opacity: 0.5 filter: alpha (opacity = 50) / * Per a IE8 i versions anteriors * /}  

Exemple 1: sortida

Imatge original (100% opacitat)

Imatge amb un 50% d’opacitat

A l'exemple anterior, només hi havia un element: una imatge. També es poden configurar altres elements amb el paràmetre d’opacitat, com ara text, elements div, etc.

Continuem amb aquest article sobre l’opacitat a CSS

Opacitat heretada amb elements en cascada

Quan els elements s’apilen els uns sobre els altres, si l’element de fons té el paràmetre d’opacitat, l’hereten tots els elements fills. Aquest és el Configuració per defecte . Això vol dir que si es col·loca un quadre de text sobre una imatge i la imatge té un paràmetre d’opacitat de 0,5, la imatge i l’element de text només seran parcialment visibles.

Prenguem la instància d’un element de text fill situat sobre la imatge de TOM & JERRY al nostre següent exemple. Podem veure l’efecte d’opacitat per defecte a l’exemple 2.

.container {position: relative text-align: center opacity: 0.5} .centered {position: absolute top: 50% left: 50% transform: translate (-50%, -50%) color: blue font-size: 40px} } TOM & JERRY

Exemple 2: el text hereta l’opacitat de la imatge principal

Continuem amb aquest article sobre l’opacitat a CSS

Configuració de l'atribut RGBA per a elements en cascada

Hi ha una altra manera de controlar l’opacitat amb elements en cascada. Si voleu que l'element fill no es vegi afectat per l'opacitat del seu element de fons, podeu utilitzar-lo Configuració de l'atribut RGBA .

Exemple 3: utilització de la configuració RGBA

fons: rgba (76, 175, 80, 1.0) / * La imatge no té opacitat * / / * Fons verd per al text amb un 100% d’opacitat * / / * El text en color blau té el 100% d’opacitat * /

operador de resolució d'abast en c ++

fons: rgba (76, 175, 80, 0,4) / * La imatge no té opacitat * / / * Fons verd per al text amb un 40% d’opacitat * / / * El text blau encara es veu amb un 100% d’opacitat * /

Després del codi de color RGB, l'atribut 'a' significa alfa . El alfa El paràmetre és un nombre entre 0,0 (totalment transparent) i 1,0 (totalment opac).

Continuem amb aquest article sobre l’opacitat a CSS

Canvis d'opacitat en l'efecte de vol

En alguns casos, els dissenyadors web volen que l’opacitat variï segons si l’usuari se centra o no en l’element. Per exemple, suposem que una imatge està establerta al 50% d’opacitat per defecte. Tanmateix, quan l’usuari passa el ratolí sobre la imatge, volem que la imatge s’enfoqui al màxim amb un 100% d’opacitat.

L'exemple 4 mostra com es fa això.

Punts comuns a tenir en compte:

• El paràmetre d’opacitat és una alternativa a l’ús de l’atribut ‘visibilitat’ a CSS. No obstant això, l’ús del paràmetre d’opacitat facilita la configuració de diferents graus de transparència, que van des de zero fins a la màxima.
• El nivell d’opacitat s’ha d’establir després de fer proves acurades en diversos navegadors. Quan l'opacitat s'estableix en valors baixos, de vegades el text o la imatge poden esdevenir completament invisibles o il·legibles.
• La idea darrere de l’ús de l’opacitat és centrar-se en alguns elements mentre que altres elements de fons no distreuen l’atenció de l’usuari. Per tant, aquests elements de fons es configuren amb una opacitat inferior.
• A Internet Explorer, per a IE8 i versions anteriors, la propietat d’opacitat és un paràmetre de «filtre» que oscil·la entre l’1 i el 100. En la resta de navegadors, oscil·la entre el 0 i l’1.

Això ens porta al final d’aquest article sobre Opacity In CSS.

Si esteu interessats en obtenir més informació sobre el desenvolupament web, consulteu el per Edureka. La formació en certificació per al desenvolupament web us ajudarà a aprendre a crear llocs web impressionants mitjançant HTML5, CSS3, Twitter Bootstrap 3, jQuery i API de Google i implementar-lo a Amazon Simple Storage Service (S3).

Si encara us interessa Si teniu alguna pregunta, podeu publicar-la a la secció de comentaris d’aquest bloc “Opacitat a CSS” i us respondrem el més aviat possible.