ຮຽນຮູ້ກ່ຽວກັບ CSS3 Opacity

ເຮັດໃຫ້ພື້ນຫລັງຂອງທ່ານໂປ່ງໃສ

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

ວິທີການໃຊ້ຄຸນສົມບັດຄວາມສະຫວ່າງ

ຄຸນສົມບັດຄວາມໂປ່ງໃສໃຊ້ມູນຄ່າຂອງຄວາມໂປ່ງໃສຈາກ 0.0 ເຖິງ 1.0.

00 ແມ່ນ 100% ໂປ່ງໃສ - ສິ່ງໃດກໍ່ຕາມຂ້າງລຸ່ມນີ້ອົງປະກອບຈະສະແດງໃຫ້ເຫັນທັງຫມົດ. 1.0 ແມ່ນ 100% opaque, ບໍ່ມີຫຍັງຢູ່ຂ້າງລຸ່ມນີ້ຈະສະແດງໃຫ້ເຫັນໂດຍຜ່ານການ.

ດັ່ງນັ້ນ, ເພື່ອກໍານົດອົງປະກອບເປັນ 50% ໂປ່ງໃສ, ທ່ານຈະຂຽນ:

opacity: 05

ເບິ່ງບາງຕົວຢ່າງຂອງຄວາມໂປ່ງໃສໃນການປະຕິບັດ

ໃຫ້ແນ່ໃຈວ່າຈະທົດສອບໃນເບົາເຊີທີ່ເກົ່າແກ່

IE 6 ຫຼື 7 ບໍ່ສະຫນັບສະຫນູນຄຸນສົມບັດ opacity CSS3. ແຕ່ທ່ານບໍ່ອອກຈາກໂຊກ. ແທນທີ່ຈະ, IE ສະຫນັບສະຫນູນຄຸນສົມບັດ Microsoft-Alpha ຕົວຄວບຄຸມຄຸນສົມບັດ. ຕົວກອງອັນຟາໃນ IE ຍອມຮັບຄ່າຈາກ 0 (ໂປ່ງໃສຫມົດ) ເຖິງ 100 (ເປ່ເພຫມົດ). ດັ່ງນັ້ນ, ເພື່ອໃຫ້ຄວາມໂປ່ງໃສຂອງທ່ານໃນ IE, ທ່ານຄວນເພີ່ມຄວາມໂປດປານຂອງທ່ານໂດຍ 100 ແລະເພີ່ມຕົວກອງອັນຟາກັບຮູບແບບຂອງທ່ານ:

filter: alpha (opacity = 50)

ເບິ່ງຕົວກອງ alpha ໃນການປະຕິບັດ (IE ເທົ່ານັ້ນ)

ແລະໃຊ້ຕົວເລືອກຂອງເບົາເຊີ

ທ່ານຄວນໃຊ້ໂປແກຼມ -moz- ແລະ -webkit-prefixes ດັ່ງນັ້ນຮຸ່ນເກົ່າຂອງ Mozilla ແລະ Webkit browsers ສະຫນັບສະຫນູນມັນເຊັ່ນກັນ:

-webkit-opacity: 05
-moz-opacity: 05
opacity: 05

ສະເຫມີໃຫ້ຄໍາ prefixes ຂອງຕົວທ່ອງເວັບທໍາອິດ, ແລະຄຸນສົມບັດທີ່ຖືກຕ້ອງ CSS3 ສຸດທ້າຍ.

ທົດສອບຄໍານໍາຫນ້າຂອງຕົວທ່ອງເວັບໃນຕົວທ່ອງເວັບ Mozilla ແລະ Webkit ທີ່ອາຍຸ.

ທ່ານສາມາດເຮັດໃຫ້ຮູບພາບເກີນໄປ

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

ແລະຖ້າທ່ານໃສ່ໃນແທັບມໍເຕີ, ທ່ານສາມາດສ້າງ ຜົນກະທົບຂອງການຫມຸນໄດ້ ໂດຍການປ່ຽນແປງຄວາມລະອຽດຂອງພາບ.

a: hover img {
filter: alpha (opacity = 50)
ຕົວກອງ: progid: DXImageTransformMicrosoftAlpha (opacity = 50)
-moz-opacity: 05
-webkit-opacity: 05
opacity: 05
}

ຜົນກະທົບຕໍ່ HTML ນີ້:

ທົດສອບຮູບແບບຂ້າງເທິງແລະ HTML ໃນການປະຕິບັດ.

ໃສ່ຂໍ້ຄວາມກ່ຽວກັບຮູບພາບຂອງທ່ານ

ມີຄວາມໂປ່ງໃສ, ທ່ານສາມາດວາງຂໍ້ຄວາມເທິງຮູບພາບແລະມີຮູບພາບທີ່ປາກົດຂື້ນກັບບ່ອນທີ່ຂໍ້ຄວາມນັ້ນແມ່ນ.

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

1. ທໍາອິດທ່ານສ້າງ DIV ບ່ອນເກັບມ້ຽນແລະວາງຮູບພາບຂອງທ່ານພາຍໃນ:

   
   

2. ປະຕິບັດຕາມຮູບພາບທີ່ມີເປົ່າ DIV - ນີ້ແມ່ນສິ່ງທີ່ທ່ານຈະເຮັດໃຫ້ໂປ່ງໃສ.

   
   
   

3. ສິ່ງສຸດທ້າຍທີ່ທ່ານເພີ່ມໃນ HTML ຂອງທ່ານແມ່ນ DIV ກັບຂໍ້ຄວາມຂອງທ່ານໃນມັນ:

   
   
   
   ນີ້ແມ່ນຫມາຂອງຂ້ອຍ Shasta. ແມ່ນບໍ່ງາມລາວ!

4. ທ່ານສະໄຕມັນດ້ວຍການຕັ້ງຕໍາແຫນ່ງ CSS, ເພື່ອວາງຂໍ້ຄວາມຂ້າງເທິງຮູບພາບ. ຂ້າພະເຈົ້າຂຽນຂໍ້ຄວາມຂອງຂ້ອຍຢູ່ເບື້ອງຊ້າຍ, ແຕ່ທ່ານສາມາດໃສ່ທາງຂວາໄດ້ໂດຍການປ່ຽນສອງດ້ານຊ້າຍ: 0; ຄຸນສົມບັດທີ່ຖືກຕ້ອງ: 0; ທີ່ຢູ່

   #image {
   ຕໍາແຫນ່ງ: relative
   width: 170px
   height: 128px
   margin: 0
   }
   #ຂໍ້​ຄວາມ {
   ຕໍາແຫນ່ງ: absolute;
   top: 0
   left: 0
   width: 60px
   height: 118px
   background: #fff
   padding: 5px
   }
   #ຂໍ້​ຄວາມ {
   filter: alpha (opacity = 70)
   ຕົວກອງ: progid: DXImageTransformMicrosoftAlpha (opacity = 70)
   -moz-opacity: 070
   opacity: 07
   }
   #words {
   ຕໍາແຫນ່ງ: absolute;
   top: 0
   left: 0
   width: 60px
   height: 118px
   background: transparent
   padding: 5px
   }

ເບິ່ງວ່າມັນເບິ່ງຄືແນວໃດ