Jinsi ya kuweka picha kwa saizi inayotaka. Picha na mali zao katika CSS. Kubadilisha picha katika kihariri cha picha

Na tena, ninakukaribisha kwenye mada nyingine iliyotolewa kwa lugha ya JavaScript, ambayo tutachambua mbinu za tahadhari, za haraka, za kupinga. Mbinu hizi zimejengwa katika lugha ya Javascript na hutusaidia kuingiliana na mtumiaji.
Arifa huonyesha kidirisha kwenye skrini ya kivinjari chenye maelezo fulani, ambayo husitisha hati hadi mtumiaji abonyeze Sawa.
Prompt kawaida huonyesha dirisha ambalo huuliza mtumiaji swali ambalo lazima ajibu katika sehemu mahususi ya maandishi kabla ya kubofya SAWA. Mtumiaji pia hawezi kuingiza chochote kwa kubonyeza kitufe cha Ghairi.
Thibitisha pia inaonyesha dirisha ambalo mtumiaji hawezi tena kuingiza chochote kwenye sehemu ya maandishi, lakini anaweza kubofya SAWA au kughairi pekee.
Na sasa, baada ya kuanzishwa kwa muda mfupi, hebu tuendelee kuzingatia yote hapo juu katika mazoezi.



tahadhari, haraka, thibitisha



tahadhari("Habari, mtumiaji mpendwa!");
var nameUser = prompt("Jina lako?" , "jina" );
var userAnswer = confirm("Je, una uhakika unataka kuondoka kwenye tovuti?" );



Matokeo yake, tunapoonyesha upya ukurasa wa kivinjari, tutaona dirisha la kumkaribisha mtumiaji. Baada ya kubofya Sawa, dirisha lifuatalo litaonekana kuuliza jina lako. Njia hii ina vigezo viwili, ya kwanza inahitajika na inawajibika kwa kichwa kitakachoonyeshwa, kwa upande wetu ni swali la jina la mtumiaji. Na parameter ya pili inawajibika kwa thamani ambayo itaonyeshwa kwa default katika uwanja wa maandishi. Ukiingiza jina lako na ubonyeze Sawa, jina lako litawekwa kwenye kigezo cha jinaMtumiaji. Ukibofya kitufe cha kughairi, null itaandikwa kwa kutofautisha.
Na hatimaye, dirisha ambalo linauliza mtumiaji kama anataka kuondoka kwenye tovuti yetu au la. Katika kesi ya ridhaa, thamani ya Boolean kweli itawekwa katika kigezo, na katika kesi ya kukataa, sivyo ipasavyo. Hayo tu ndiyo unayohitaji kujua kuhusu njia hizi, tuonane katika masomo yanayofuata!

Somo hili ni aina ya muendelezo wa uliopita, ambao tuliangalia, sasa ni wakati wa kuimarisha ujuzi wako na kuangalia mali ya CSS ya picha.

Vipimo vya Picha katika CSS







.img (
upana:200px;
urefu: 200px;
}






Wacha tuone ni nini kipya hapa, niliunda darasa la img ambalo nilielezea vipimo vya picha, upana ni upana, na urefu ni urefu, nilitaja vipimo vikubwa kuliko vya asili ili uweze kuona wazi jinsi picha itabadilika.





(Hiki ndicho kichwa) Mfano wa ukurasa wa HTML5

.img (
upana:50px;
urefu: 50px;
ukingo: 20px;
}
.img1 (
upana:50px;
urefu: 50px;
}



Kwa uwazi, nitatoa mfano ambapo kutakuwa na maandishi mengi, na utaona nini indents kutoka kwa picha kuna.Katika mfano huu, tutatumia mali ya margin ambayo itakupa fursa ya kutathmini uwezo wake.


Kwa uwazi, nitatoa mfano ambapo kutakuwa na maandishi mengi, na utaona ni indents gani kutoka kwa picha iliyopo.Katika mfano huu, tutatumia picha bila kutaja indents ili uweze kuona tofauti.




Katika kivinjari tunaona yafuatayo:

Nilifanya indents kutoka kwa picha katika mfano huu shukrani kwa parameta ya ukingo, ambayo ilitupa indents saizi 20 kutoka kwa kingo zote nne. Hapa unaweza kufanya ujanja ujanja zaidi; unaweza kuweka kukabiliana kutoka kwa makali maalum, kwa mfano:

  • ukingo-juu - ukingo kutoka upande wa juu
  • ukingo-kulia - ukingo kutoka upande wa kulia
  • ukingo-chini - ukingo kutoka upande wa chini
  • ukingo-kushoto - ukingo kutoka upande wa kushoto

Ipasavyo, hapa unaweza kurekebisha kila kitu vizuri zaidi, au kuweka indent kutoka pande moja au mbili bila kugusa zingine.





(Hiki ndicho kichwa) Mfano wa ukurasa wa HTML5

.img (
upana:150px;
urefu: 150px;
upana wa mpaka: 10px;
mtindo wa mpaka: dotted;
mpaka-rangi: #ff0000;
}






Katika kivinjari:

Tunaweka sura karibu na picha, shukrani kwa parameta ya mpaka, kwanza tunaweka upana wa sura kwa kutumia upana wa mpaka, tunaiweka kwa saizi, kisha mtindo wa sura, yaani, kuonekana kwake kwa mtindo wa mpaka, hapa. Kuna maadili kadhaa ambayo unaweza kuchagua:

Na parameter ya mwisho ambayo tutarekebisha ni rangi ya mpaka, ambayo imewekwa na parameter ya mpaka-rangi.





(Hiki ndicho kichwa) Mfano wa ukurasa wa HTML5

mwili (
mandharinyuma: url(proba.png);
}





Katika kivinjari tunaona:

Kama unavyoelewa, tuliweka usuli kwa lebo ya mwili shukrani kwa kiteuzi cha lebo, kwa kuwa inachukua hati nzima, tunaweza pia kuikabidhi kwa lebo zingine. Parameta ya mandharinyuma ilitupa usuli na picha ya anwani ambayo tunaandika kwenye mabano. Unaweza pia kudhibiti mandharinyuma, kwa mfano:

mandharinyuma: url(proba.png) repeat-x;

Mandharinyuma yatarudiwa tu kwenye mhimili wa X, yaani, kwa usawa katika mstari mmoja.

mandharinyuma: url(proba.png) repeat-y;

Mandharinyuma yatarudiwa tu kwenye mhimili wa Y, yaani, wima katika mstari mmoja.

mandharinyuma: url(proba.png) hakuna kurudia;

Mandharinyuma hayatajirudia na picha moja tu itaonekana.

saizi ya mandhari-nyuma: 500px 200px;

Hii ni kigezo cha ziada kinachoweka saizi ya picha kwa usuli, upana na urefu.

Kuweka Picha kwa Uwazi kwa kutumia CSS





(Hiki ndicho kichwa) Mfano wa ukurasa wa HTML5

.img (
uwazi: 0.5;
chujio: alfa(Opacity=50);
}







Katika kivinjari tunaona yafuatayo:

Mali hii ilikuja na ujio wa CSS3 na kwa kweli ilipata matumizi mengi. Inatekelezwa kwa kutumia parameta ya opacity, ambayo huweka uwazi wa picha, maadili kutoka 0 hadi 1, na kichujio cha pili cha parameta: alpha (Opacity = 50); hufanya sawa tu kwa kivinjari cha Internet Explorer kwani matoleo ya zamani hayaunga mkono parameter ya opacity, maadili kutoka 0 hadi 100. Katika mfano, nilitengeneza picha mbili maalum ili tofauti iweze kuonekana wazi.

Hii inahitimisha somo la “Sifa za Picha za CSS.” Natumai somo hili lilikuwa muhimu kwako na lilikuhimiza kusoma zaidi lugha na kupata maarifa mapya.

Tarehe ya kuchapishwa:2014-04-22


Picha itarekebishwa kwa saizi maalum kwa sentimita (milimita, inchi), pamoja na saizi maalum ya DPI, kulingana na viwango vya uchapishaji wa karatasi. Vipimo katika cm, mm na inchi vinaweza kutajwa kwa usahihi wa elfu, kwa mfano, badala ya muundo wa 15x10, unaweza kuweka 15.201x10.203 cm.

Jedwali lenye ukubwa wa kawaida wa picha katika nafasi ya wima (wima):

Umbizo la picha kwa sentimita (cm) Ukubwa katika milimita (mm) Ukubwa katika pikseli
(kwa uchapishaji 300 dpi)
Uwiano wa kipengele
(katika mwelekeo wa mazingira)
3x4 (baada ya kukata kwa mikono) 30x40 354x472 4:3 (1.33)
3.5x4.5 (baada ya kukata kwa mikono) 35x45 413x531 4:3 (1.33)
9x13 89x127 1063x1535 10:7 (1.43)
10x15 102x152 1181x1772 3:2 (1.5)
13x18 127x178 1535x2126 7:5 (1.4)
15x20 (≈A5) 152x203 1772x2362 4:3 (1.33)
15x21 152x216 1772x2480 4:3 (1.33)
18x24 178x240 2126x2835 19:14 (1.36)
20x25 203x254 2362x2953 5:4 (1.25)
20x30 (≈A4) 203x305 2362x3543 3:2 (1.5)
30x40 305x406 3543x4724 4:3 (1.33)
30x45 305x457 3543x5315 3:2 (1.5)

Ukubwa wa kawaida wa karatasi ya A4 ni 21x29.7 cm au 2480x3508 saizi katika 300 dpi. Vipimo vya muundo mwingine wa karatasi vinaweza kuonekana kwenye ukurasa wa Wikipedia, lakini kumbuka tu kwamba vipimo vimeorodheshwa pale katika milimita na inchi, i.e. Katika mipangilio kwenye ukurasa huu unahitaji kuchagua thamani inayofaa.

Ikiwa unahitaji kurekebisha ukubwa wa picha bila kuzingatia DPI (dots kwa inchi), ambayo ni, kuheshimu tu idadi ya umbizo maalum, basi ili kufanya hivyo unahitaji kuweka parameta ya "Size katika DPI" hadi "0" ndani. mipangilio.

Picha asili haijabadilishwa kwa njia yoyote. Utapewa picha nyingine iliyochakatwa.

1) Bainisha picha katika umbizo la BMP, GIF, JPEG, PNG, TIFF:

2) Ingiza muundo wa picha unaotaka kwa sentimita, milimita au inchi
Umbizo linalohitajika: X katika milimita (mm) sentimita (cm) inchi (inchi)
(Muundo chaguo-msingi ni 15x10, ambayo inafaa kwa upigaji picha wa mlalo (mlalo); kwa upigaji picha wa wima (wima), thamani hizi lazima zibadilishwe, yaani, bainisha 10x15, kama inavyoonyeshwa kwenye jedwali) Ukubwa katika DPI: (0 = "puuza DPI , tengeneza kwa uwiano kulingana na umbizo maalum")
(Ukubwa wa picha asili ya jpg katika DPI inaweza kupatikana kwa kusoma metadata) Aina ya kurekebisha ukubwa kwa vipimo maalum:
Kudumisha uwiano na kupunguza kingo za ziada
Mpira kunyoosha au kupungua, hakuna trimming
Bila kupunguzwa, pamoja na rangi nyekundu ya zambarau ya samawati turquoise anga ya kijani kibichi manjano machungwa nyeusi kijivu nyeupe mandharinyuma kuzunguka kingo Piga hadi: juu kushoto katikati kulia chini ya picha.