ຄໍາແນະນໍາສໍາລັບການສ້າງນ້ໍາຂໍ້ມູນກ່ຽວກັບຫນ້າເວັບ

ປະຕິບັດເທກນິກດ້ວຍ CSS

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

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

ການເລີ່ມຕົ້ນ

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

ຮູບພາບພື້ນຖານທີ່ມີຂະຫນາດໃຫຍ່ເຫຼົ່ານີ້ແມ່ນງ່າຍທີ່ຈະສ້າງໂດຍນໍາໃຊ້ຄຸນສົມບັດ ແບບ CSS ສາມຢ່າງຕໍ່ໄປນີ້:

ພື້ນຫລັງ - ຮູບພາບ

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

background-image: url (/images/page-background.jpg);

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

ທ່ານສາມາດປັບພາບພື້ນຫລັງໃນໂຄງການແກ້ໄຂໃດຫນຶ່ງເຊັ່ນ Adobe Photoshop.

ພື້ນຫລັງ - ເຮັດຊ້ໍາ

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

ພື້ນຫລັງ - ເຮັດເລື້ມຄືນ: ບໍ່ມີການເຮັດເລື້ມຄືນ;

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

ພື້ນຖານ, ໄຟລ໌ແນບ

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

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

ພື້ນຖານທີ່ຕິດຕໍ່: ຄົງທີ່;

ພື້ນຫລັງ - ຂະຫນາດ

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

ພື້ນຫລັງ - ຂະຫນາດ: ປົກ;

ສອງຄຸນຄ່າທີ່ເປັນປະໂຫຍດທີ່ທ່ານສາມາດນໍາໃຊ້ສໍາລັບຊັບສິນນີ້ລວມມີ:

ເພີ່ມ CSS ໃນຫນ້າຂອງທ່ານ

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

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