BACKGROUND

Դաս 1.

BACKGROUND

Ուսումնասիրության համար կօգտագործենք մեկ բջջից բաղկացած աղյուսակ. <table width="1200" height="800" border="1"><tr><th >Text.</th></tr></table>:
Background-ը կարճգրություն է: Այն պարունակում է 5 ատրիբուտներ:
Հնարավոր արժեքներն են.
 background: #FC6;
 background: url();
 background: scroll;
 background: fixed;
 background: transparent;
 background: x%;
 background: y%;
 background: left;
 background: center;
 background: right;
 background: top;
 background: bottom;
 background: repeat;
 background: repeat-x;
 background: repeat-y;
 background: no-repeat;
 background: inherit;

Կարող ենք կիրառել միաժամանակ մի քանի հատկություններ:

background: red url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi68Z1RP5tzi7qe3_qzDF2SvA-6Udz3w7gBJQwknDDI5z6KrwoMw9E1AF7tlr19rYQhsB8anyZ_bjDkZqZVgxvOYzcsnzsC2WC0f2J2v6x9uBst0wn9mQNmbNntckPrgVtehH2jY_kQyn-p/s1600/css.JPG) repeat-x bottom right;

BACKGROUND-ATTACHMENT

background-attachment-ի միջոցով կարող ենք որոշել, օրինակ, նկարը կշարժվի պարունակության հետ, թե կմնա ֆիքսված:

Հնարավոր արժեքներն են.

 background-attachment: scroll; /*նկարը կշարժվի պարունակության հետ*/
 background-attachment: fixed; /*նկարը չի շարժվի, կմնա ֆիքսված իր տեղում*/
 background-attachment: inherit;

Վարժություն 1!

Սակայն սկզբից պետք է սահմանել նկարի աղբյուրը-url -ն:

Օրինակ.

background-image: url (https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi68Z1RP5tzi7qe3_qzDF2SvA-6Udz3w7gBJQwknDDI5z6KrwoMw9E1AF7tlr19rYQhsB8anyZ_bjDkZqZVgxvOYzcsnzsC2WC0f2J2v6x9uBst0wn9mQNmbNntckPrgVtehH2jY_kQyn-p/s1600/css.JPG);

background-attachment: fixed;
Փորձեք սա գրատախտակի վրա:

background-image: ();

Դաս 2.

BACKGROUND-COLOR

background-color-ով սահմանում ենք էլեմենտի ֆոնի գույնը:
Հնարավոր արժեքներն են.


 background-color: #ddffee; /* կիրառական է գույնի ներմուծման ցանկացած ձև, RGB(78, 51, 133);*/
 background-color: transparent;
 background-color: inherit;

Ահա գույնի սահմանման կոդերը.

background-color: RGB(5, 50, 55);
background-color: red;
background-color: #3333CC;





Վարժություն 2!

Փորձիր այս օրինակներից մեկը.
background-color: green;
background-color: RGB(125, 55, 100);

background-color: #FFDDCC;

Դաս 3.

BACKGROUND-IMAGE

background-image-ի միջոցով սահմանում ենք նկարը որպես էլեմենտի ֆոն:

Հնարավոր արժեքներն են.

 background-image: url();
 background-image: inherit;

Վարժություն 3!
Կարող եք copy անել ինչ-որ մի նկար desktop-ի վրա, ապա փակագծերի մեջ գրել նկարի անունը և ֆայլի տիպը, ապա սեղմել Preview դաշտը:

background-image: ();

Դաս 4.

BACKGROUND-POSITION

background-position-ով սահմանում ենք էլեմենտի դիրքը:
Հնարավոր արժեքներն են.

 background-position: 25px;
 background-position: 25%;
 background-position: top;
 background-position: center;
 background-position: bottom;
 background-position: left;
 background-position: right;
 background-position-x: 50%;
 background-position-x: 25px;
 background-position-x: left;
 background-position-x: center;
 background-position-x: right;
 background-position-y: 50%;
 background-position-y: 25px;
 background-position-y: top;
 background-position-y: center;
 background-position-y: bottom;

Նախ պետք է սահմանել նկարի աղբյուրը:

Փորձիր սա, կամ գրիր մեկ այլ url

background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi68Z1RP5tzi7qe3_qzDF2SvA-6Udz3w7gBJQwknDDI5z6KrwoMw9E1AF7tlr19rYQhsB8anyZ_bjDkZqZVgxvOYzcsnzsC2WC0f2J2v6x9uBst0wn9mQNmbNntckPrgVtehH2jY_kQyn-p/s1600/css.JPG);

background-position-y: top;

Վարժություն 4!
Գրիր նույնությամբ, կամ մեկ այլ url և

փորձիր այս կոդերից.

background-position: left top; /* or 0% 0% */

background-position: left center; /* or 0% 50% */

background-position: left bottom; /* or 0% 100% */

background-position: right top; /* or 100% 0% */

background-position: right center; /* or 100% 50% */

background-position: right bottom; /* or 100% 100% */

background-position: center top; /* or 50% 0% */

background-position: center center; /* or 50% 50% */

background-position: center bottom; /* or 50% 100% */

background-position: 50%0%;

background-image: ();

Դաս 5.

BACKGROUND-REPEAT

background-repeat- եթե նկարի չափսերը փոքր են, ապա նկարը կկրկնվի այս հատկության հայտարարման շնորհիվ:
Հնարավոր արժեքներն են.

 background-repeat: repeat; /*multiple copies the background image in all directions*/
 background-repeat: repeat-x; /*multiple copies the background image horizontally*/
 background-repeat: repeat-y; /*multiple copies the background image vertically*/
 background-repeat: no-repeat; /*not repeating the image*/
 background-repeat: inherit;

Մի մոռացեք, նախապես սահմանել նկարի url-ն:

Վարժություն 5!
Հիմա մուտքագրեք նկարի url-ն և փորձեք հնարավոր արժեքները:
Օրինակ.

background-image: url()
background-repeat: repeat-x;

background-image: url();

OPACITY (CSS3)

Սրանով սահմանում ենք էլեմենտի թափանցիկությունը:


Հնարավոր արժեքներն են.
 opacity: 0.1; /* or .1*/
 opacity: 0.2; /* or .2*/
..................
opacity: 1.0;
IE բրաուզերի համար կիրառելի է filter: alpha(opacity=10) /* 0-100*/

BACKGROUND-SIZE (CSS3)

Սրանով կարող ենք սահմանել ֆոնային նկարի չափերը:

Հնարավոր արժեքներն են.

 background-size: 100px 200px; /*width and height*/
 background-size: 75%;
 background-size: auto;
 background-size: contain;
 background-size: cover;

BACKGROUND-SPACING (CSS3)

Սրանով սահմանում ենք ֆոնային նկարների միջև հեռավորությունները:

Հնարավոր արժեքներն են.
background-spacing: 25px 28px;
background-spacing: 15px;
background-spacing: inherit;

BACKGROUND-QUANTITY (CSS3)

Իսկ սրանով կարող ենք սահմանել, թե քանի անգամ նկարը պետք է կրկնվի:

Հնարավոր արժեքներն են.

 background-quantity: infinite;
 background-quantity: inherit;
 background-quantity: 4; /* 4 անգամ*/

background-image: url();