CSS-тэй техникийг гүйцээнэ үү
Хэрэв та вэбсайтаа зохиож байгаа бол вэб хуудас дээр тогтмол суурь зургийг хэрхэн үүсгэх талаар мэдэх сонирхолтой байж магадгүй. Энэ нь нэлээд хугацаатай онлайнаар алдаршсан нийтлэг дизайн эмчилгээ юм. Энэ нь таны вэб дизайны уутанд заль мэх хийхэд тохиромжтой нөлөө юм.
Хэрэв та өмнө нь хийгээгүй, урьд өмнө нь амжилтанд хүрээгүй байсан бол энэ нь аймшигтай санагдаж магадгүй ч энэ нь огтхон ч хэцүү биш юм. Энэ товч зааварчилгааг ашиглан та CSS ашиглан минутын турш техникийг эзэмшихэд шаардлагатай мэдээллийг авна.
Эхлэх
Суурь зургууд эсвэл watermarks (энэ нь үнэхээр арай хөнгөн дэвсгэр зурагнууд) хэвлэсэн дизайны түүхтэй. Баримт бичгүүд нь тэдгээрийг хуулбарлахаас сэргийлж тэдгээрийг устган оруулсан болно. Түүнчлэн, олон тооны брошюр, товхимол нь хэвлэмэл хуудсын дизайны нэг хэсэг болох том дэвсгэр зургийг ашигладаг. Вэб дизайн нь хэвлэмэл болон арын зургуудаас авсан урт зургууд нь эдгээр зээлсэн загварын нэг юм.
Эдгээр том дэвсгэр зургийг дараах гурван CSS загварын шинж чанаруудыг ашиглан үүсгэх нь хялбар байдаг:
- Арын зураг
- background-repeat
- суурь-хавсралт
- арын хэмжээ
Арын зураг
Та watermark-ыг ашиглах дүрсийг тодорхойлохын тулд арын дэвсгэр зургийг ашиглах болно. Энэ загвар нь таны вэбсайтад байгаа зургийг ачаалахын тулд файлын замыг ашигладаг бөгөөд "зураг" нэртэй сан дотор байж магадгүй.
background-image: url (/images/page-background.jpg);
Энэ зураг нь энгийн зурагтай харьцуулахад хөнгөн буюу илүү ил тод байх нь чухал юм. Энэ нь вэбсайтын текст, график, бусад гол элементүүдийн ард хагас ил тод дүрс бүхий "watermark" харагдах байдлыг бий болгоно. Энэ алхамгүйгээр дэвсгэр зураг таны хуудсан дээрх мэдээллүүдтэй өрсөлдөж, уншихад төвөгтэй болгодог.
Та Adobe Photoshop зэрэг ямар ч засварлах програм дээр арын зургийг тохируулж болно.
Оршил-давталт
Background-repeat property дараагийнх нь ирдэг. Хэрэв та өөрийн зургийг том watermark-style график болгохыг хүсч байгаа бол энэ зургийг ашиглан тухайн зургийг зөвхөн нэг удаа харуулах болно.
background-repeat: no-repeat;
"Үгүй-давталт" үл хөдлөх хөрөнгө байхгүй бол анхдагч нь тухайн зураг хуудсанд дахин давтагдах болно. Энэ нь ихэнх орчин үеийн вэб хуудас дизайныг хүсэхгүй байгаа тул энэ хэв маяг нь таны CSS-д чухал гэж тооцогддог.
Үндэслэл - Хавсралт
Оршил-хавсралт гэдэг нь олон вэб дизайнерууд мартдагийн өмч юм. Үүнийг "тогтмол" өмчийг ашигласнаар таны арын зургийг байршуулах боломжтой. Энэ нь тухайн зургийг хуудсан дээр байрлуулсан Watermark руу хувиргадаг.
Энэ өмчний анхдагч утга нь "гүйлгэх". Хэрэв та суурь-хавсралтын утгыг зааж өгөөгүй бол арын дэвсгэр нь хуудасны үлдсэн хэсэгт гүйлгэнэ.
суурь-хавсралт: тогтмол;
Үндсэн хэмжээ
Оршил-хэмжээ бол шинэ CSS өмч юм. Энэ нь үзсэн viewport дээр суурилсан дэвсгэрийн хэмжээг тохируулах боломжийг олгодог. Энэ нь өөр өөр төхөөрөмжүүд дээр янз бүрийн хэмжээтэй харуулах хариу вэбсайтуудад маш их тустай.
суурь хэмжээ: хамгаалах;
Энэ өмч хөрөнгөнд ашиглах хоёр үнэт зүйл:
- Хавтас - Үндсэн дэвсгэрийг бүхэл бүтэн өргөн эсвэл бүрэн өндрөөр харуулсан. Энэ нь дэлгэцийн зарим хэсэг дэлгэц дээр харагдахгүй байж болох боловч нийт талбайг хамрах болно гэсэн үг юм.
- Contain - Зургийг масштабаар харуулахын тулд бүхэл өргөн, өндрийг хоёуланг нь загварчлагдсан газарт харуулав. Зураг нь таслагдахгүй боловч талбайн хэсэг нь тухайн зургаар хучигдахгүй байж болно.
CSS хуудсыг нэмж оруулах
Дээрх шинж чанарууд болон тэдгээрийн үнэ цэнийг ойлгосны дараа эдгээр загварыг таны вэбсайтад нэмж болно.
Хэрэв та нэг хуудсыг сайт хийж байгаа бол өөрийн вэб хуудас HEAD руу дараах зүйлсийг нэмээрэй. Хэрэв та олон хуудасны сайт барьж байгаа бөгөөд гадаад хуудасны хүчийг давуу талыг ашиглахыг хүсвэл гаднах загварын хуудсын CSS загварт нэмэх хэрэгтэй.