රූප CSS භාවිතා කරමින්

ඔබගේ පින්තූර විලාස සහ ස්මයිල්වල භාවිතා කළ හැකි පින්තූර

බොහෝ දෙනෙක් අකුරු වෙනස් කිරීම, වර්ණය, ප්රමාණය සහ තවත් දේ වෙනස් කිරීමට CSS භාවිතා කරයි. නමුත් බොහෝ දෙනා බොහෝ විට අමතක කරන එක් දෙයක් වන්නේ ඔබට CSS භාවිතා කළ හැකිය.

රූපය වෙනස් කිරීම

CSS මඟින් පිටුවෙහි පෙන්වන ආකාරය වෙනස් කිරීමට CSS ඔබට ඉඩ දෙයි. ඔබගේ පිටු ස්ථාවර කිරීම සඳහා මෙය සැබැවින්ම ප්රයෝජනවත් විය හැකිය. සියලු අනුරූප මත ශෛලමය සැකසීමෙන්, ඔබ ඔබගේ පින්තූර සඳහා සම්මත පෙනුමක් නිර්මාණය කරයි. ඔබට කළ හැකි සමහර දේවල්:

• රූප වටා ඇති මායිම හෝ සැකිල්ලක් එකතු කරන්න
• සම්බන්ධිත ඡායාරූප වටා ඇති වර්ණ තීරුව ඉවත් කරන්න
• රූපවල පළල හා / හෝ උස සකස් කිරීම
• පහළ වැටීමක් එකතු කරන්න
• රූපය මාරු කිරීම
• රූපයේ ඉහළට ඔසවා ඇති විට ශෛල්ය වෙනස් කරන්න

ඔබගේ ප්රතිරූපය ලබා දීම සඳහා දේශ සීමාවක් ආරම්භ කිරීම සඳහා විශිෂ්ට ස්ථානයක්. නමුත් ඔබ පමණක් මායිම් වඩා සැලකිල්ලට ගත යුතුය - ඔබේ ප්රතිරූපයේ සමස්ත මායිම ගැන සිතන්න සහ මායිම් සහ වැල්වැල් සකස් කරන්න. සිහින් කළු පැහැති මායිමක් සහිත රූපයක් පෙනේ. එහෙත් මායිම් අතර යම් බල්බයක් එකතු කර ඇති අතර රූපය වඩා හොඳ පෙනුමකින් යුක්ත වේ.

img {
දේශසීමා: 1px solid black;
වැල්ඩින්: 5px;
}}

හැකි සෑම විටම අලංකාර රූප සම්බන්ධ කිරීමට හොඳ අදහසක්. නමුත් ඔබ කරන විට, බොහෝ බ්රව්සරයන් රූපය වටා ඇති පාට තීරුවක් එක් කරයි. ඔබ සීමාව වෙනස් කිරීම සඳහා ඉහත කේතය යොදා ගත්තත්, ඔබ සබැඳියෙහි ඇති සීමාව ඉවත් කිරීම හෝ වෙනස් කිරීම නොකර, සබැඳිය එය අභිබවා යනවා. මෙය සිදු කිරීම සඳහා ඔබ සබැඳි ඡායාරූප අවට සීමාව ඉවත් කිරීම හෝ වෙනස් කිරීම සඳහා CSS ළමා රීතිය භාවිතා කළ යුතුය:

img> a {
දේශසීමා: කිසිවක් නැත;
}}

ඔබේ රූපයේ උස සහ පළල වෙනස් කිරීම හෝ සැකසීම සඳහා CSS භාවිතා කළ හැකිය. බාගත වේගයන් නිසා රූපයේ ප්රමාණ ගැලපුම් කිරීම සඳහා බ්රවුසරය භාවිතා කිරීම හොඳ අදහසක් නොවී සිටියද, ඔවුන් තවමත් හොඳ පෙනුමක් ඇති නිසා ඒවායේ ප්රමාණය වෙනස් කිරීමට වඩා හොඳය. CSS සමඟ ඔබට ඔබේ රූප සියල්ල සම්මත පළල හෝ උස බවට පත් කළ හැකිය, හෝ බහාලුම්වලට සාපේක්ෂව මානකර තැබිය හැකිය.

මතක තබාගන්න, ඔබ ප්රතිරූපණ ප්රමාණය ප්රතිස්ථාපනය කරන විට හොඳම ප්රතිඵලය සඳහා, ඔබ එක් එක් පරිමාණයකට පමණක් සීමා කළ යුතුය - උස හෝ පළල. මෙම රූපය එහි දර්ශන අනුපාතය රඳවා තබා ගන්නා බැවින් එය අමුතු දෙයක් නොවේ. අළුත් අගයක් ස්වයංක්රීයව හෝ දර්ශන අනුපාතය ස්ථාවර කිරීම සඳහා බ්රවුසරයට පැවසීමට ඉඩ හරින්න.

img {
පළල: 50%;
උස: වාහන;
}}

CSS3 මෙම ගැටලුව සඳහා නව දේපල-විචලනය හා වස්තුව-ස්ථානය සමග මෙම ගැටළුවට විසඳුම් ඉදිරිපත් කරයි. මෙම ගුණාංගවලින් ඔබට නිශ්චිත රූපයේ උස හා පළල නිර්වචනය කළ හැකි අතර දර්ශන අනුපාතය හැසිරවිය යුත්තේ කෙසේද. මෙම පින්තූරයේ ඇති පින්තූර හෝ වගාවන් වටා ලිපින පෙල ගැසීම් නිර්මාණය කිරීමට ඉඩ ඇති අතර රූපය අවශ්ය ප්රමාණයට ගැලපෙන පරිදි ලබා ගත හැකිය.

CSS3 වස්තු-විචල්ය සහ වස්තුව-තත්ව ගුණාංග තවමත් පුළුල් ලෙස නොපවතින අතර ඔබේ නව රූප වෙනස් කිරීම සඳහා භාවිතා කළ හැකි නවීන වෙබ් බ්රවුසරයන්හි හොඳින් CSS3 ගුණාංග ඇත. හරියටම සෙවනැලි, වටකුරු කොන, හැරුණු විට, වෙනස්කම් වලට භාජනය කිරීම, ඇඹරීම හෝ ඔබේ පින්තූර සියල්ලම නූතන බ්රවුසර් වලදී දැන් වැඩ කරයි. ඉන්පසු ඔබට CSS සංක්රාන්ති භාවිතා කළ හැකිය, පින්තූර වෙනස් කිරීම හෝ ක්ලික් කිරීම හෝ පසුව යන්තම් පසුව පින්තූර වෙනස් කිරීමට.

පසුබිම් ලෙස පින්තූර භාවිතා කිරීම

CSS ඔබගේ පින්තූර සමඟ විසිතුරු පසුබිම් නිර්මාණය කිරීමට පහසුය.

ඔබට සම්පූර්ණ පිටුවට හෝ විශේෂිත මූලද්රව්යයකට පසුබිම් එකතු කළ හැකිය. පසුබිම් රූපය පසුබිම් රූපය සහිත පසුබිමක් නිර්මාණය කිරීම පහසුය:

සිරුර {
පසුබිම් රූප: url (පසුබිම.jpg);
}}

එක් මූලද්රව්යයේ පසුබිම තැබීම සඳහා පිටුවෙහි විශේෂිත මූලද්රව්යයකට ශරීර තේරීම්කාරකය මාරු කරන්න.

පින්තූර සමඟ කළ හැකි තවත් විනෝදයක් වනුයේ, අනෙක් කොටස සමඟ අනුචලනය නොවන පසුබිම් රූපයක් - ජල ලේජරයක් වැනි. ඔබ පමණක් සරල පසුබිම-ඇමුණුම්: ස්ථාවර; ඔබගේ පසුබිම් ඡායාරූප සමග. ඔබගේ පසුබිම් සඳහා වෙනත් විකල්ප: ඒවායේ පසුබිම්-පුනරාවර්තී දේ භාවිතා කරමින් තිරස් ආකාරයෙන් හෝ සිරස් අතට ටයිල් කරති.

Background-repeat: write-x; තිරස් අතට සහ පසුබිම්-පුනරාවර්තනය ටයිල් ටයිල්: repeat-y; සිරස් උළු ඔබට පසුබිම් රූපය පසුබිම් තත්වයේ දේපල සමඟ ස්ථානගත කළ හැකිය.

CSS3 ඔබේ පසුබිම් සඳහා තවත් විලාසයන් එකතු කරයි. ඔබට අවශ්ය ඕනෑම ප්රමාණයක පසුබිමකට ගැලපෙන ලෙස හෝ ඔබේ පසුබිම් රූපය කවුළුවෙහි ප්රමාණය මැනිය හැකිය. ඔබට තත්ත්වය වෙනස් කර පසුබිම් රූපය ආවරණය කළ හැකිය. එහෙත් CSS3 පිළිබඳ හොඳම දේගෙන් එකක් වන්නේ දැන් ඔබ වඩාත් සංකීර්ණ බලපෑම් නිර්මාණය කිරීමට පසුබිම් දර්ශන කිහිපයක් ආවරණය කළ හැකිය.

HTML5 ස්මාර්ට් පින්තූර උපකාර කරයි

HTML5 හි FIGURE හි මූලද්රව්යය ලේඛනය තුල තනිව සිටීමට හැකි ඕනෑම පින්තූර වටා විය යුතුය. ඒ ගැන සිතීමට එක් ක්රමයක් නම් රූපය ඇඩැප්ටිසියෙන් දිස්විය හැකි නම්, එය FIGURE මූලද්රව්යය තුළ තිබිය යුතුය. ඔබට එම අංගය සහ FIGCAPTION අංගය ඔබේ පින්තූරයට විලාස උපහේටනය කළ හැකිය.