ວິທີການຂະຫຍາຍຮູບພາບພື້ນຫລັງທີ່ເຫມາະສົມກັບຫນ້າເວັບ

ໃຫ້ຄວາມສົນໃຈໃນເວັບໄຊທ໌ຂອງທ່ານກັບຮູບພາບພື້ນຫລັງ

ຮູບພາບແມ່ນສ່ວນຫນຶ່ງທີ່ສໍາຄັນຂອງການອອກແບບເວັບໄຊທ໌ທີ່ຫນ້າສົນໃຈ. ນີ້ປະກອບມີການນໍາໃຊ້ຮູບພາບພື້ນຖານ. ເຫຼົ່ານີ້ແມ່ນຮູບພາບແລະຮູບພາບທີ່ຖືກນໍາໃຊ້ ຢູ່ຫລັງ ເຂດຂອງຫນ້າທີ່ກົງກັນຂ້າມກັບຮູບພາບທີ່ຖືກນໍາສະເຫນີເປັນສ່ວນຫນຶ່ງຂອງຫນ້າເນື້ອຫາ. ຮູບພາບພື້ນຖານເຫລົ່ານີ້ສາມາດເພີ່ມຄວາມສົນໃຈຕາກັບຫນ້າແລະຊ່ວຍໃຫ້ທ່ານບັນລຸການອອກແບບທີ່ທ່ານອາດຈະຊອກຫາໃນຫນ້າ.

ຖ້າທ່ານເລີ່ມຕົ້ນເຮັດວຽກກັບຮູບພາບພື້ນຫລັງ, ທ່ານແນ່ນອນຈະແລ່ນເຂົ້າໄປໃນສະຖານະການທີ່ທ່ານຕ້ອງການຮູບພາບເພື່ອຂະຫຍາຍອອກໃຫ້ເຫມາະສົມກັບຫນ້າ.

ນີ້ແມ່ນໂດຍສະເພາະແມ່ນຄວາມຈິງສໍາລັບເວັບໄຊທ໌ທີ່ຕອບສະຫນອງທີ່ ຖືກສົ່ງໄປຫາອຸປະກອນຕ່າງໆແລະຂະຫນາດຫນ້າຈໍຕ່າງໆ .

ຄວາມປາຖະຫນາທີ່ຈະຂະຫຍາຍຮູບພາບຄວາມເປັນມານີ້ແມ່ນຄວາມປາຖະຫນາທົ່ວໄປສໍາລັບນັກອອກແບບເວັບໄຊຕ໌ເພາະວ່າບໍ່ທຸກຮູບທີ່ເຫມາະສົມໃນພື້ນທີ່ຂອງເວັບໄຊທ໌. ແທນທີ່ຈະກໍານົດຂະຫນາດຄົງທີ່, ການຂະຫຍາຍຮູບພາບຊ່ວຍໃຫ້ມັນປ່ຽນແປງຫນ້າທີ່ບໍ່ວ່າ ຫນ້າຕ່າງຂອງຕົວທ່ອງເວັບ ກວ້າງຫຼືແຄບແມ່ນແນວໃດ.

ວິທີທີ່ດີທີ່ສຸດທີ່ຈະຂະຫຍາຍຮູບພາບທີ່ເຫມາະສົມກັບພື້ນຫລັງຂອງຫນ້າແມ່ນໃຊ້ຄຸນສົມບັດ CSS3 ສໍາລັບພື້ນຫລັງຂະຫນາດ. ນີ້ແມ່ນຕົວຢ່າງທີ່ໃຊ້ຮູບພາບພື້ນຖານສໍາລັບຮ່າງກາຍຂອງຫນ້າແລະທີ່ກໍານົດຂະຫນາດເຖິງ 100% ເພື່ອໃຫ້ມັນສະເຫມີຈະຍືດເຫມາະກັບຫນ້າຈໍ.

body {
background: url (bgimage.jpg) no-repeat;
ພື້ນຫລັງຂະຫນາດ: 100%;
}

ອີງຕາມການ caniuse.com, ຊັບສິນນີ້ເຮັດວຽກໃນ IE 9+, Firefox 4+, Opera 10.5+, Safari 5+, Chrome 105+ ແລະທຸກຕົວທ່ອງເວັບມືຖືທີ່ສໍາຄັນ. ນີ້ກວມເອົາທ່ານສໍາລັບຕົວທ່ອງເວັບທີ່ທັນສະໄຫມທັງຫມົດທີ່ມີຢູ່ໃນມື້ນີ້, ຊຶ່ງຫມາຍຄວາມວ່າທ່ານຄວນໃຊ້ຊັບສິນນີ້ໂດຍບໍ່ຢ້ານວ່າມັນຈະບໍ່ເຮັດວຽກກັບຫນ້າຈໍຂອງຜູ້ໃດຜູ້ຫນຶ່ງ.

Faking Background Background in Older Browsers

ມັນເປັນໄປບໍ່ໄດ້ທີ່ວ່າທ່ານຈໍາເປັນຕ້ອງສະຫນັບສະຫນູນຕົວທ່ອງເວັບທີ່ເກົ່າກວ່າ IE9, ແຕ່ໃຫ້ສົມມຸດວ່າທ່ານມີຄວາມກັງວົນວ່າ IE8 ບໍ່ສະຫນັບສະຫນູນຄຸນສົມບັດນີ້. ໃນກໍລະນີດັ່ງກ່າວ, ທ່ານສາມາດປອມແປງຄວາມເປັນມາແລ້ວ. ແລະທ່ານສາມາດໃຊ້ prefix browser ຂອງ Firefox 3.6 (-moz-background-size) ແລະ Opera 10.0 (-o-background-size).

ວິທີທີ່ງ່າຍທີ່ສຸດທີ່ຈະປອມແປງຮູບພາບພື້ນຖານທີ່ຂ້ອນຂ້າງຍາວແມ່ນເພື່ອຂະຫຍາຍມັນຜ່ານຫນ້າທັງຫມົດ. ຫຼັງຈາກນັ້ນ, ທ່ານບໍ່ຈົບລົງດ້ວຍພື້ນທີ່ພິເສດຫຼືຕ້ອງກັງວົນວ່າຂໍ້ຄວາມຂອງທ່ານເຫມາະສົມກັບພື້ນທີ່ຂ້ອນຂ້າງ. ນີ້ແມ່ນວິທີທີ່ຈະເຮັດມັນ:

id = "bg" />

1. ຫນ້າທໍາອິດ, ໃຫ້ແນ່ໃຈວ່າທຸກຕົວທ່ອງເວັບມີຄວາມສູງ 100%, ຂອບ 0 ແລະ 0 padding ແລະ HTML ອົງປະກອບ BODY. ໃສ່ດັ່ງຕໍ່ໄປນີ້ໃນຫົວຂອງເອກະສານ HTML ຂອງທ່ານ:

2. ເພີ່ມຮູບພາບທີ່ທ່ານຕ້ອງການພື້ນຫລັງເປັນອົງປະກອບທໍາອິດຂອງຫນ້າເວັບແລະໃຫ້ id ຂອງ "bg":

3. ຕັ້ງ ຮູບພາບພື້ນຫລັງເພື່ອ ໃຫ້ມັນມີການສ້ອມແປງຢູ່ເທິງແລະເບື້ອງຊ້າຍແລະກວ້າງ 100% ແລະ 100% ໃນລະດັບຄວາມສູງ. ຕື່ມການນີ້ໄປໃສ່ຮູບແບບຂອງທ່ານ:

   img # bg {
   ຕໍາແຫນ່ງ: fixed
   top: 0
   left: 0
   width: 100%
   height: 100%
   }

4. ເພີ່ມເນື້ອຫາທັງຫມົດຂອງທ່ານໄປຍັງຫນ້າຂອງສ່ວນປະກອບຂອງ DIV ທີ່ມີ id ຂອງ "ເນື້ອຫາ". ຕື່ມ DIV ພາຍໃຕ້ຮູບ:

   ເນື້ອຫາທັງຫມົດຂອງທ່ານທີ່ນີ້ - ລວມທັງຫົວຂໍ້, ວັກ, ແລະອື່ນໆ.

   ຫມາຍເຫດ: ມັນຫນ້າສົນໃຈທີ່ຈະເບິ່ງຫນ້າຂອງທ່ານຕອນນີ້. ຮູບພາບຄວນສະແດງອອກ, ແຕ່ວ່າເນື້ອຫາຂອງທ່ານແມ່ນຫາຍໄປຫມົດ. ເປັນຫຍັງ? ເນື່ອງຈາກວ່າພາບພື້ນຫລັງມີຄວາມສູງ 100% ແລະການແບ່ງເນື້ອຫາແມ່ນ ຫຼັງຈາກ ຮູບພາບໃນການໄຫລຂອງເອກະສານ - ຕົວທ່ອງເວັບສ່ວນຫຼາຍຈະບໍ່ສະແດງມັນ.
   
5. ຕໍາແຫນ່ງເນື້ອຫາຂອງທ່ານເພື່ອໃຫ້ມັນມີຄວາມກ່ຽວຂ້ອງແລະມີ ດັດຊະນີ z ຂອງ 1. ນີ້ຈະນໍາມັນຂຶ້ນຢູ່ກັບຮູບພາບພື້ນຖານໃນຕົວທ່ອງເວັບຕາມມາດຕະຖານທີ່ສອດຄ່ອງກັບ. ຕື່ມການນີ້ໄປໃສ່ຮູບແບບຂອງທ່ານ:

   #content {
   ຕໍາແຫນ່ງ: relative
   z-index: 1;
   }

1. ແຕ່ທ່ານບໍ່ໄດ້ເຮັດ. Internet Explorer 6 ບໍ່ແມ່ນມາດຕະຖານທີ່ສອດຄ່ອງກັບແລະຍັງມີບັນຫາບາງຢ່າງ. ມີຫລາຍວິທີທີ່ຈະຊ່ອນ CSS ຈາກທຸກຕົວທ່ອງເວັບແຕ່ IE6, ແຕ່ງ່າຍທີ່ສຸດ (ແລະຫນ້ອຍທີ່ອາດຈະເຮັດໃຫ້ເກີດບັນຫາອື່ນໆ) ແມ່ນການນໍາໃຊ້ຄໍາເຫັນທີ່ມີເງື່ອນໄຂ. ໃສ່ດັ່ງຕໍ່ໄປນີ້ຫຼັງຈາກຄໍເຕົ້າໄຂ່ທີ່ທ່ານຢູ່ໃນຫົວຂອງເອກະສານຂອງທ່ານ:

2. ພາຍໃນຄໍາເຫັນທີ່ເນັ້ນໃຫ້ເຫັນ, ເພີ່ມເອກະສານແບບອື່ນໆທີ່ມີຄໍເຕົ້າໄຂ່ທີ່ບາງຢ່າງເພື່ອໃຫ້ IE 6 ຫຼິ້ນໄດ້ດີ:

3. ໃຫ້ແນ່ໃຈວ່າຈະທົດສອບໃນ IE 7 ແລະ IE 8 ເຊັ່ນດຽວກັນ. ທ່ານອາດຈະຕ້ອງປັບຄໍາເຫັນເພື່ອສະຫນັບສະຫນູນພວກເຂົາເຊັ່ນກັນ. ຢ່າງໃດກໍຕາມ, ມັນເຮັດວຽກເມື່ອຂ້ອຍທົດສອບມັນ.

OK - ນີ້ແມ່ນການຍອມຮັບວ່າການ overkill. ສະຖານທີ່ຈໍານວນຫນ້ອຍທີ່ຈໍາເປັນຕ້ອງສະຫນັບສະຫນູນ IE 7 ຫຼື 8 ອີກແລ້ວ, IE6 ຫຼາຍຫນ້ອຍ!

ດັ່ງນັ້ນ, ວິທີການນີ້ແມ່ນເກົ່າແກ່ແລະອາດຈະບໍ່ຈໍາເປັນສໍາລັບທ່ານ. ຂ້າພະເຈົ້າອອກຈາກທີ່ນີ້ຫຼາຍເປັນຮູບແບບຂອງຄວາມຢາກຮູ້ກ່ຽວກັບສິ່ງທີ່ມີຄວາມຫຍຸ້ງຍາກຫລາຍຂຶ້ນກ່ອນທີ່ທຸກຕົວທ່ອງເວັບຂອງພວກເຮົາຈະມີຄວາມສະຫນຸກສະຫນານກັນ!

Faking A Background Background Stretched Over Space Space

ທ່ານສາມາດໃຊ້ເຕັກນິກທີ່ຄ້າຍຄືກັນເພື່ອປອມແປງຮູບພາບພື້ນຖານທີ່ຍາວນານຜ່ານ DIV ຫຼືອົງປະກອບອື່ນໃນຫນ້າເວັບຂອງທ່ານ. ນີ້ແມ່ນ trickier ທີ່ດີກວ່າທ່ານຕ້ອງໃຊ້ຕໍາແຫນ່ງຢ່າງແທ້ຈິງຫຼືມີບັນຫາການແຍກຕ່າງຫາກທີ່ແຕກຕ່າງກັນສໍາລັບພາກສ່ວນອື່ນຂອງຫນ້າຂອງທ່ານ.

1. ໃສ່ຮູບພາບໃນຫນ້າທີ່ຂ້ອຍຕ້ອງການໃຊ້ເປັນພື້ນຫລັງ.

2. ໃນເອກະສານສະໄຕ, ຕັ້ງຄວາມກວ້າງແລະຄວາມສູງສໍາລັບຮູບພາບ. ຫມາຍເຫດ, ທ່ານສາມາດໃຊ້ສ່ວນຮ້ອຍສໍາລັບຄວາມກວ້າງຫຼືຄວາມສູງ, ແຕ່ຂ້າພະເຈົ້າເຫັນວ່າມັນງ່າຍກວ່າທີ່ຈະປັບດ້ວຍຄ່າຄວາມຍາວຂອງຄວາມສູງ.

   img # bg {
   width: 20em
   height: 30em
   }

3. ຈັດວາງເນື້ອໃນຂອງທ່ານໃນ div ກັບ id "content" ເຊັ່ນດຽວກັນດັ່ງລຸ່ມນີ້:

   ເນື້ອຫາທັງຫມົດຂອງທ່ານຢູ່ທີ່ນີ້

4. ແບບເນື້ອຫາທີ່ມີຄວາມກວ້າງແລະຄວາມສູງເທົ່າກັບຮູບພາບພື້ນຖານ:

   div # content {
   width: 20em
   height: 30em
   }

5. ຫຼັງຈາກນັ້ນຕໍາແຫນ່ງເນື້ອຫາສູງເຖິງຄວາມສູງເທົ່າກັບຮູບພາບ. ດັ່ງນັ້ນ, ຖ້າຮູບພາບຂອງທ່ານແມ່ນ 30em, ທ່ານຈະມີຮູບແບບທາງດ້ານເທິງ: -30em; ຢ່າລືມໃສ່ດັດຊະນີ z ຂອງ 1 ໃນເນື້ອຫາ.

   #content {
   ຕໍາແຫນ່ງ: relative
   top: -30em
   z-index: 1;
   width: 20em
   height: 30em
   }

6. ຫຼັງຈາກນັ້ນຕື່ມໃນ index z-1 ສໍາລັບ IE 6 ຜູ້ໃຊ້, ດັ່ງທີ່ທ່ານໄດ້ເຮັດຢູ່ຂ້າງເທິງ:

ອີກເທື່ອຫນຶ່ງ, ໂດຍມີພື້ນຖານຂະຫນາດທີ່ເພິ່ງພໍໃຈກັບການສະຫນັບສະຫນູນຂອງຕົວທ່ອງເວັບຢ່າງກວ້າງຂວາງໃນປັດຈຸບັນ, ວິທີການນີ້ຍັງມີຫຼາຍທີ່ບໍ່ຈໍາເປັນແລະນໍາສະເຫນີເປັນຜະລິດຕະພັນຂອງຍຸກທີ່ຜ່ານມາ. ຖ້າທ່ານຕ້ອງການໃຊ້ວິທີນີ້, ໃຫ້ແນ່ໃຈວ່າຈະທົດສອບນີ້ໃນຕົວທ່ອງເວັບຫຼາຍເທົ່າທີ່ທ່ານສາມາດເຮັດໄດ້.

ແລະຖ້າວ່າເນື້ອຫາຂອງທ່ານປ່ຽນຂະຫນາດ, ທ່ານຈໍາເປັນຕ້ອງປ່ຽນຂະຫນາດຂອງຖັງແລະຮູບພາບພື້ນຫລັງຂອງທ່ານ, ຖ້າບໍ່ດັ່ງນັ້ນ, ທ່ານຈະສິ້ນສຸດດ້ວຍຜົນທີ່ແຕກຕ່າງ.