ຮູບແບບຂອງທ່ານຮູບພາບແລະການນໍາໃຊ້ຮູບພາບໃນຮູບແບບ
ຫລາຍຄົນໃຊ້ CSS ເພື່ອປັບຂໍ້ຄວາມ, ປ່ຽນແປງ font, ສີ, ຂະຫນາດແລະອື່ນໆ. ແຕ່ສິ່ງຫນຶ່ງທີ່ຄົນມັກລືມມັກແມ່ນວ່າທ່ານສາມາດນໍາໃຊ້ CSS ດ້ວຍຮູບພາບເຊັ່ນກັນ.
ການປ່ຽນແປງຮູບພາບມັນເອງ
CSS ຊ່ວຍໃຫ້ທ່ານສາມາດດັດແປງຮູບພາບທີ່ສະແດງໃນຫນ້າເວັບໄດ້. ນີ້ສາມາດເປັນປະໂຫຍດແທ້ໆສໍາລັບການຮັກສາຫນ້າຂອງທ່ານຢ່າງສອດຄ່ອງ. ໂດຍການສ້າງຮູບແບບຕ່າງໆໃນຮູບພາບທັງຫມົດ, ທ່ານສ້າງຮູບແບບມາດຕະຖານສໍາລັບຮູບພາບຂອງທ່ານ. ບາງສິ່ງທີ່ທ່ານສາມາດເຮັດໄດ້:
- ເພີ່ມຂອບເຂດຫຼືຮູບຮ່າງຮອບຮູບ
- ດຶງອອກຈາກຊາຍແດນສີທີ່ອ້ອມຮອບຮູບພາບທີ່ເຊື່ອມໂຍງ
- ການປັບຄວາມກວ້າງແລະ / ຫຼືຄວາມສູງຂອງຮູບພາບ
- ເພີ່ມເງົາຖິ້ມ
- Rotate the image
- ປ່ຽນຄໍເຕົ້າໄຂ່ທີ່ເມື່ອຮູບພາບຖືກປົກຄຸມກວ່າ
ການໃຫ້ພາບຂອງທ່ານຊາຍແດນເປັນບ່ອນທີ່ດີເລີດທີ່ຈະເລີ່ມຕົ້ນ. ແຕ່ທ່ານຄວນພິຈາລະນາຫຼາຍກ່ວາຂອບເຂດຊາຍແດນ - ຄິດກ່ຽວກັບຂອບທັງຫມົດຂອງຮູບພາບຂອງທ່ານແລະປັບຂອບຂອບແລະ ຜ້າ . ຮູບພາບທີ່ມີເສັ້ນຂອບສີດໍາບາງຢ່າງທີ່ສວຍງາມ, ແຕ່ເພີ່ມບາງບ່ອນທີ່ຜູກມັດລະຫວ່າງຊາຍແດນແລະຮູບພາບສາມາດເບິ່ງໄດ້ດີກວ່າເກົ່າ.
img {
border: 1px solid black
padding: 5px
}
ມັນເປັນຄວາມຄິດທີ່ດີທີ່ຈະ ສະເຫມີເຊື່ອມຕໍ່ກັບຮູບພາບທີ່ບໍ່ແມ່ນອອກແບບ , ເມື່ອເປັນໄປໄດ້. ແຕ່ເມື່ອທ່ານເຮັດ, ຈົ່ງຈື່ຈໍາວ່າຕົວທ່ອງເວັບສ່ວນໃຫຍ່ເພີ່ມເສັ້ນຂອບສີທີ່ອ້ອມຮອບຮູບພາບ. ເຖິງແມ່ນວ່າຖ້າທ່ານໃຊ້ລະຫັດຂ້າງເທິງເພື່ອປ່ຽນແປງຂອບເຂດ, ການເຊື່ອມຕໍ່ຈະ override ວ່າເວັ້ນເສຍແຕ່ວ່າທ່ານເອົາອອກຫລືປ່ຽນແປງຂອບເຂດໃນການເຊື່ອມຕໍ່ເຊັ່ນກັນ. ເພື່ອເຮັດສິ່ງນີ້ທ່ານຄວນໃຊ້ກົດລະບຽບຂອງເດັກ CSS ເພື່ອເອົາເອົາຫຼືປ່ຽນແປງຂອບເຂດຂອງຮູບພາບທີ່ເຊື່ອມຕໍ່ກັນ:
img> a {
border: none
}
ນອກນັ້ນທ່ານຍັງສາມາດໃຊ້ CSS ເພື່ອປ່ຽນຫຼືກໍານົດຄວາມສູງແລະຄວາມກວ້າງຂອງຮູບພາບຂອງທ່ານ. ໃນຂະນະທີ່ມັນບໍ່ແມ່ນຄວາມຄິດທີ່ດີທີ່ຈະໃຊ້ຕົວທ່ອງເວັບເພື່ອປັບຂະຫນາດຮູບພາບເນື່ອງຈາກຄວາມໄວຂອງການດາວໂຫລດ, ພວກເຂົາໄດ້ຮັບການປັບຂະຫນາດຮູບພາບຫຼາຍຂຶ້ນເພື່ອວ່າພວກເຂົາຍັງຄົງເບິ່ງດີ. ແລະດ້ວຍ CSS ທ່ານສາມາດກໍານົດຮູບພາບຂອງທ່ານໃຫ້ທັງຫມົດເປັນຄວາມກວ້າງມາດຕະຖານຫລືຄວາມສູງມາດຕະຖານຫຼືແມ້ກະທັ້ງກໍານົດຂະຫນາດທີ່ມີຄວາມກ່ຽວຂ້ອງກັບບັນຈຸ.
ຈືຂໍ້ມູນການ, ໃນເວລາທີ່ທ່ານ resize ຮູບພາບ, ສໍາລັບຜົນໄດ້ຮັບທີ່ດີທີ່ສຸດ, ທ່ານພຽງແຕ່ຄວນປັບຂະຫນາດຫນຶ່ງມິຕິ - ຄວາມສູງຫຼືຄວາມກວ້າງ. ນີ້ຈະເຮັດໃຫ້ຮູບພາບຮັກສາອັດຕາສ່ວນຂອງມັນ, ແລະດັ່ງນັ້ນບໍ່ໄດ້ເບິ່ງແປກ. ກໍານົດມູນຄ່າອື່ນໆເພື່ອອັດຕະໂນມັດຫຼືປ່ອຍໃຫ້ມັນອອກເພື່ອບອກໃຫ້ຕົວທ່ອງເວັບຮັກສາອັດຕາສ່ວນທີ່ສອດຄ່ອງ.
img {
width: 50%
height: auto
}
CSS3 ສະຫນອງການແກ້ໄຂບັນຫານີ້ກັບຄຸນສົມບັດໃຫມ່ທີ່ເຫມາະສົມແລະຈຸດປະສົງຂອງຈຸດປະສົງ. ດ້ວຍຄຸນສົມບັດເຫຼົ່ານີ້ທ່ານຈະສາມາດກໍານົດຄວາມສູງແລະຄວາມກວ້າງຂອງຮູບພາບທີ່ແນ່ນອນແລະວິທີການຈັດການອັດຕາສ່ວນຂອງມັນ. ນີ້ອາດຈະສ້າງຜົນກະທົບຕໍ່ letterboxing ປະມານຮູບພາບຂອງທ່ານຫຼືການປູກພືດເພື່ອໃຫ້ຮູບພາບທີ່ເຫມາະສົມກັບຂະຫນາດທີ່ຕ້ອງການ.
ໃນຂະນະທີ່ຄຸນສົມບັດ CSS3 object-fit ແລະຄຸນລັກສະນະຕໍາແຫນ່ງບໍ່ໄດ້ຮັບການສະຫນັບສະຫນູນຢ່າງກວ້າງຂວາງເທື່ອ, ຍັງມີຄຸນສົມບັດ CSS3 ອື່ນໆທີ່ຖືກສະຫນັບສະຫນູນໃນຕົວທ່ອງເວັບທີ່ທັນສະໄຫມທີ່ສຸດທີ່ທ່ານສາມາດໃຊ້ເພື່ອແກ້ໄຂຮູບພາບຂອງທ່ານ. ສິ່ງທີ່ຄ້າຍຄືການຫຼຸດລົງເງົາ, ມຸມກົມ, ແລະການຫັນປ່ຽນເພື່ອຫມຸນ, skew, ຫຼືຍ້າຍຮູບພາບຂອງທ່ານທັງຫມົດເຮັດວຽກໃນປັດຈຸບັນໃນຕົວທ່ອງເວັບທີ່ທັນສະໄຫມຫຼາຍທີ່ສຸດ. ຫຼັງຈາກນັ້ນທ່ານສາມາດນໍາໃຊ້ CSS ການປ່ຽນແປງເພື່ອເຮັດໃຫ້ຮູບພາບຕ່າງໆປ່ຽນແປງໃນເວລາທີ່ຜ່ານເວລາຜ່ານໄປຫຼືຄລິກໃສ່ຫຼືຫຼັງຈາກເວລາໃດຫນຶ່ງ.
ການນໍາໃຊ້ຮູບພາບເປັນພື້ນຫລັງ
CSS ເຮັດໃຫ້ມັນງ່າຍທີ່ຈະສ້າງພື້ນຫລັງທີ່ສວຍງາມທີ່ມີຮູບພາບຂອງທ່ານ.
ທ່ານສາມາດເພີ່ມພື້ນຫລັງໄປຫາຫນ້າທັງຫມົດຫຼືພຽງແຕ່ເປັນອົງປະກອບສະເພາະ. ມັນງ່າຍທີ່ຈະສ້າງຮູບພາບພື້ນຫລັງໃນຫນ້າທີ່ມີຄຸນສົມບັດພື້ນຫລັງພາບ:
body {
background-image: url (background.jpg);
}
ປ່ຽນຕົວເລືອກຂອງຮ່າງກາຍໄປຫາອົງປະກອບສະເພາະໃດຫນຶ່ງໃນຫນ້າເວັບເພື່ອເຮັດໃຫ້ພື້ນຫຼັງພຽງແຕ່ຫນຶ່ງອົງປະກອບ.
ອີກສິ່ງທີ່ມ່ວນຊື່ນທີ່ທ່ານສາມາດເຮັດໄດ້ດ້ວຍຮູບພາບແມ່ນສ້າງຮູບພາບພື້ນຖານທີ່ບໍ່ເລື່ອນພາບກັບສ່ວນທີ່ເຫຼືອຂອງຫນ້າ - ເຊັ່ນ watermark. ທ່ານພຽງແຕ່ໃຊ້ຮູບແບບການຕິດຕາມແບບດັ້ງເດີມ: ມີການສ້ອມແປງ; ພ້ອມກັບພາບພື້ນຫລັງຂອງທ່ານ. ທາງເລືອກອື່ນສໍາລັບພື້ນຫລັງຂອງທ່ານກໍ່ຄືການເຮັດໃຫ້ກະເບື້ອງໃຫ້ມີແນວນອນແລະແນວຕັ້ງໂດຍໃຊ້ຄຸນສົມບັດພື້ນຫລັງ.
ຂຽນພື້ນຫລັງ - ເຮັດເລື້ມຄືນ: repeat-x; ເພື່ອກະເບື້ອງຮູບພາບຢຽດຕາມທາງຂວາງແລະພື້ນຫລັງຄືນ - repeat-y; ເພື່ອກະເບື້ອງແນວຕັ້ງ. ແລະທ່ານສາມາດຕັ້ງຮູບພາບພື້ນຖານຂອງທ່ານກັບຄຸນສົມບັດພື້ນຖານຂອງຕໍາແຫນ່ງ.
ແລະ CSS3 ເພີ້ມຄໍເຕົ້າໄຂ່ເພີ່ມເຕີມສໍາລັບພື້ນຫລັງຂອງທ່ານເຊັ່ນກັນ. ທ່ານສາມາດ ຍືດຮູບພາບຂອງທ່ານໃຫ້ເຫມາະສົມກັບພື້ນຫລັງຂະຫນາດໃດໆ ຫຼື ກໍານົດຮູບພາບພື້ນຫລັງທີ່ມີຂະຫນາດທີ່ມີຂະຫນາດ window . ທ່ານສາມາດປ່ຽນຕໍາແຫນ່ງແລະຫຼັງຈາກນັ້ນ clip ຮູບພາບພື້ນຫລັງ. ແຕ່ສິ່ງຫນຶ່ງທີ່ດີທີ່ສຸດກ່ຽວກັບ CSS3 ແມ່ນວ່າທ່ານສາມາດຈັດວາງຮູບພາບພື້ນຫລັງຫຼາຍໆຄັ້ງເພື່ອສ້າງຜົນກະທົບທີ່ສັບສົນຫຼາຍ.
HTML5 ຊ່ວຍຮູບແບບຕ່າງໆ
ອົງປະກອບຮູບພາບໃນ HTML5 ຄວນຖືກວາງຢູ່ໃນຮູບພາບຕ່າງໆທີ່ສາມາດຢືນຢູ່ພາຍໃນເອກະສານໄດ້. ວິທີຫນຶ່ງທີ່ຈະຄິດກ່ຽວກັບມັນແມ່ນຖ້າຮູບພາບສາມາດປາກົດໃນ appendix ແລ້ວມັນຄວນຈະຢູ່ໃນອົງປະກອບຮູບ. ຫຼັງຈາກນັ້ນທ່ານສາມາດໃຊ້ອົງປະກອບແລະອົງປະກອບ FIGCAPTION ເພື່ອເພີ່ມຮູບແບບຂອງຮູບພາບຂອງທ່ານ.