ນີ້ແມ່ນວິທີການເພີ່ມຮູບພາບການອອກແບບທີ່ຕອບສະຫນອງໂດຍໃຊ້ CSS
ເບິ່ງໃນເວັບໄຊທ໌ທີ່ນິຍົມໃນມື້ນີ້ແລະການອອກແບບການອອກແບບຫນຶ່ງທີ່ທ່ານແນ່ໃຈວ່າຈະເຫັນແມ່ນຮູບພາບພື້ນຫລັງໃຫຍ່, ຫນ້າຈໍທີ່ກວ້າງ. ຫນຶ່ງໃນສິ່ງທ້າທາຍທີ່ມີການເພີ່ມຮູບພາບເຫລົ່ານີ້ມາຈາກການປະຕິບັດທີ່ດີທີ່ສຸດທີ່ເວັບໄຊທ໌ຕ້ອງຕອບສະຫນອງກັບຂະຫນາດຫນ້າຈໍຕ່າງໆແລະອຸປະກອນ - ວິທີການທີ່ເອີ້ນວ່າ ການອອກແບບເວັບທີ່ຕອບສະຫນອງ .
ຕັ້ງແຕ່ຮູບແບບເວັບໄຊທ໌ຂອງທ່ານປ່ຽນແປງແລະເກັດທີ່ມີຂະຫນາດຫນ້າຈໍທີ່ແຕກຕ່າງກັນ, ດັ່ງນັ້ນຮູບພາບພື້ນຖານເຫຼົ່ານີ້ຕ້ອງປັບຂະຫນາດຂອງມັນໃຫ້ເຫມາະສົມ.
ໃນຄວາມເປັນຈິງ, ເຫຼົ່ານີ້ "ຮູບພາບນ້ໍາ" ແມ່ນຫນຶ່ງໃນຕ່ອນທີ່ສໍາຄັນຂອງເວັບໄຊທ໌ທີ່ຕອບສະຫນອງ (ພ້ອມກັບສາຍໄຟຟ້າແລະສື່ມວນຊົນສອບຖາມ). ສາມຊິ້ນໄດ້ເປັນຫລັກຂອງການອອກແບບເວັບທີ່ຕອບສະຫນອງນັບຕັ້ງແຕ່ການເລີ່ມຕົ້ນແຕ່ໃນຂະນະທີ່ມັນງ່າຍຕໍ່ການເພີ່ມຮູບພາບພາຍໃນທີ່ຕອບສະຫນອງກັບເວັບໄຊທ໌ (ຮູບພາບພາຍໃນແມ່ນຮູບພາບທີ່ຖືກລະຫັດເປັນສ່ວນຫນຶ່ງຂອງ HTML markup) ເຊັ່ນດຽວກັນກັບຮູບພາບພື້ນຫລັງ (ທີ່ຖືກ styled ເຂົ້າໄປໃນຫນ້າທີ່ນໍາໃຊ້ຄຸນສົມບັດພື້ນຖານຂອງ CSS) ໄດ້ໃຫ້ຄວາມທ້າທາຍທີ່ສໍາຄັນຕໍ່ກັບນັກອອກແບບເວັບແລະຜູ້ພັດທະນາດ້ານຫນ້າ. ຂອບໃຈ, ການເພີ່ມຄຸນສົມບັດ "ພື້ນຫລັງຂະຫນາດ" ໃນ CSS ໄດ້ເຮັດໃຫ້ນີ້ເປັນໄປໄດ້.
ໃນບົດຂຽນທີ່ແຕກຕ່າງກັນ, ຂ້າພະເຈົ້າໄດ້ກວມເອົາ ວິທີການນໍາໃຊ້ພື້ນຖານພື້ນຖານຂອງຊັບສິນ CSS3 ເພື່ອຂະຫຍາຍຮູບພາບທີ່ເຫມາະສົມໃນປ່ອງຢ້ຽມ, ແຕ່ມີວິທີທີ່ດີກວ່າແລະມີປະໂຫຍດຫຼາຍທີ່ຈະໃຊ້ສໍາລັບຊັບສິນນີ້. ເພື່ອເຮັດສິ່ງນີ້, ພວກເຮົາຈະນໍາໃຊ້ຊັບສິນຕໍ່ໄປນີ້ແລະການປະສົມປະສານມູນຄ່າ:
ພື້ນຫລັງ - ຂະຫນາດ: ປົກ;
ຄຸນສົມບັດຄໍາທີ່ໃຊ້ໃນການປົກປິດບອກຕົວທ່ອງເວັບໃຫ້ຂະຫນາດພາບເພື່ອໃຫ້ເຫມາະສົມກັບປ່ອງຢ້ຽມ, ໂດຍບໍ່ວ່າວິທີການຂະຫນາດໃຫຍ່ຫຼືຂະຫນາດນ້ອຍທີ່ປ່ອງຢ້ຽມໄດ້ຮັບ. ຮູບພາບແມ່ນຂະຫນາດເພື່ອໃຫ້ກວມເອົາຫນ້າຈໍທັງຫມົດ, ແຕ່ອັດຕາສ່ວນຕົ້ນແລະ ອັດຕາສ່ວນຂອງ ມັນຖືກເກັບຮັກສາໄວ້ຄົງຕົວ, ປ້ອງກັນຕົວເອງຈາກການຖືກບິດເບືອນ.
ຮູບພາບຖືກວາງໄວ້ໃນປ່ອງຢ້ຽມທີ່ໃຫຍ່ທີ່ສຸດເພື່ອໃຫ້ພື້ນຜິວຫນ້າທັງຫມົດຖືກປົກຄຸມ. ນີ້ຫມາຍຄວາມວ່າທ່ານຈະບໍ່ມີຈຸດໃດໆໃນຫນ້າຂອງທ່ານຫຼືການບິດເບືອນໃດໆກ່ຽວກັບຮູບພາບ, ແຕ່ມັນກໍ່ຫມາຍຄວາມວ່າບາງສ່ວນຂອງຮູບພາບອາດຈະຖືກຕັດອອກໂດຍອີງຕາມອັດຕາສ່ວນຂອງຫນ້າຈໍແລະຮູບພາບໃນຄໍາຖາມ. ຕົວຢ່າງເຊັ່ນແຄມຂອງຮູບພາບ (ທັງດ້ານເທິງ, ລຸ່ມ, ຊ້າຍ, ຂວາ) ອາດຖືກຕັດອອກໃນຮູບພາບຕ່າງໆ, ອີງຕາມຄຸນຄ່າທີ່ທ່ານໃຊ້ສໍາລັບຄຸນສົມບັດພື້ນຖານ. ຖ້າທ່ານກໍາລັງທິດທາງກັບ "ເບື້ອງຊ້າຍດ້ານເທິງ", ສິ່ງທີ່ເກີນໄປກ່ຽວກັບຮູບພາບຈະມາຈາກດ້ານລຸ່ມແລະດ້ານຂວາ. ຖ້າທ່ານວາງໃຈໃສ່ຮູບພາບພື້ນຫລັງ, ຄວາມເກີນຈະອອກມາຈາກທັງສອງດ້ານ, ແຕ່ເນື່ອງຈາກວ່າຄວາມເກີນແມ່ນແຜ່ອອກໄປ, ຜົນກະທົບຕໍ່ທຸກໆດ້ານຈະຫນ້ອຍລົງ.
ວິທີການໃຊ້ພື້ນຫລັງຂະຫນາດ: ການປົກຫຸ້ມ;
ເມື່ອສ້າງຮູບພາບພື້ນຖານຂອງທ່ານ, ມັນເປັນຄວາມຄິດທີ່ດີທີ່ຈະສ້າງຮູບພາບທີ່ມີຂະຫນາດໃຫຍ່. ໃນຂະນະທີ່ຕົວທ່ອງເວັບສາມາດສ້າງຮູບພາບຂະຫນາດນ້ອຍໂດຍບໍ່ມີຜົນກະທົບທີ່ຫນ້າສົນໃຈກ່ຽວກັບຄຸນນະພາບຂອງຕາ, ເມື່ອຕົວທ່ອງເວັບຂະຫນາດພາບຂຶ້ນໄປຂະຫນາດຂະຫນາດໃຫຍ່ກ່ວາຂະຫນາດຕົ້ນສະບັບຂອງມັນ, ຄຸນນະພາບທາງສາຍຕາຈະຖືກລະລາຍ, ກາຍເປັນເປົ່າແລະ pixelated. ຄວາມເສຍຫາຍຕໍ່ນີ້ແມ່ນວ່າຫນ້າເວັບຂອງທ່ານໃຊ້ເວລາປະສົບຜົນສໍາເລັດໃນເວລາທີ່ທ່ານສົ່ງຮູບພາບຍັກໃຫຍ່ໄປຫາຫນ້າຈໍທັງຫມົດ.
ໃນເວລາທີ່ທ່ານເຮັດສິ່ງນີ້, ໃຫ້ແນ່ໃຈວ່າການ ກະກຽມຮູບພາບເຫຼົ່ານັ້ນເພື່ອຄວາມໄວດາວໂຫລດແລະການຈັດສົ່ງເວັບ . ໃນທີ່ສຸດ, ທ່ານຈໍາເປັນຕ້ອງຊອກຫາສື່ທີ່ມີຄວາມສຸກລະຫວ່າງຂະຫນາດຂະຫນາດໃຫຍ່ແລະຄຸນນະພາບຂະຫນາດໃຫຍ່ແລະຂະຫນາດໄຟທີ່ເຫມາະສົມສໍາລັບຄວາມໄວດາວໂຫລດ.
ຫນຶ່ງໃນວິທີການທົ່ວໄປໃນການນໍາໃຊ້ຮູບພາບພື້ນຖານການຂະຫຍາຍຕົວແມ່ນເມື່ອທ່ານຕ້ອງການຮູບພາບທີ່ໃຊ້ເວລາພື້ນຫລັງເຕັມຂອງຫນ້າໃດຫນຶ່ງ, ບໍ່ວ່າຫນ້ານັ້ນແມ່ນກວ້າງແລະຖືກເບິ່ງຢູ່ໃນຄອມພິວເຕີ desktop ຫຼືມີຂະຫນາດນ້ອຍກວ່າແລະຖືກສົ່ງໄປຫາມືຖື, ອຸປະກອນ.
ອັບໂຫລດຮູບພາບຂອງທ່ານໃຫ້ແກ່ເຈົ້າພາບເວັບແລະເພີ່ມໃສ່ CSS ຂອງທ່ານເປັນຮູບພາບພື້ນຖານ:
background-image: url (fireworks-over-wdw.jpg);
ພື້ນຫລັງ - ເຮັດເລື້ມຄືນ: ບໍ່ມີການເຮັດເລື້ມຄືນ;
ຕໍາແຫນ່ງພື້ນຖານ: ສູນກາງ;
ພື້ນຖານທີ່ຕິດຕໍ່: ຄົງທີ່;
ເພີ່ມຕົວທ່ອງເວັບ prefixed CSS ທໍາອິດ:
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
ຫຼັງຈາກນັ້ນ, ເພີ່ມຄຸນສົມບັດ CSS:
ພື້ນຫລັງ - ຂະຫນາດ: ປົກ;
ການນໍາໃຊ້ຮູບພາບທີ່ແຕກຕ່າງກັນທີ່ເຫມາະສົມກັບອຸປະກອນແຕກຕ່າງກັນ
ໃນຂະນະທີ່ການອອກແບບຕອບສະຫນອງສໍາລັບ desktop ຫຼື laptop ແມ່ນມີຄວາມສໍາຄັນ, ອຸປະກອນຕ່າງໆທີ່ສາມາດເຂົ້າເຖິງເວັບໄດ້ຂະຫຍາຍຕົວຢ່າງຫຼວງຫຼາຍ, ແລະຂະຫນາດຂອງຫນ້າຈໍທີ່ແຕກຕ່າງກັນຫຼາຍຂຶ້ນມາ.
ດັ່ງທີ່ໄດ້ກ່າວມາກ່ອນ, ການອັບໂຫຼດຮູບພາບພື້ນຖານທີ່ຕອບສະຫນອງທີ່ສຸດໃນໂທລະສັບສະຫຼາດ, ສໍາລັບຕົວຢ່າງ, ບໍ່ແມ່ນການອອກແບບທີ່ມີປະສິດທິຜົນຫຼືມີປະສິດຕິພາບ.
ຮຽນຮູ້ວິທີທີ່ທ່ານສາມາດນໍາໃຊ້ການ ສອບຖາມສື່ ເພື່ອໃຫ້ພາບທີ່ເຫມາະສົມກັບອຸປະກອນທີ່ພວກເຂົາຈະສະແດງຢູ່ແລະສືບຕໍ່ປັບປຸງຄວາມເຂົ້າກັນຂອງເວັບໄຊທ໌ຂອງທ່ານກັບອຸປະກອນມືຖື.
ບົດສະບັບທໍາອິດໂດຍ Jennfier Krynin. ດັດແກ້ໂດຍ Jeremy Girard 9/12/17