ຄວາມສະເຫຼງ/ຄວາມສະຫຼາກ CSS

opacity ຄຳປະສານກຳນົດຄວາມກະຈັງ/ຄວາມສະເຫຼງຂອງປະກອບຫຼັກ.

ຮູບພາບສະເຫຼງ

opacity ຈຸດນັດຂອງຄຳປະສົມປະກອບມີຄວາມສະເຫຼງຈາກ 0.0-1.0. ຈຸດນັດທີ່ຕໍ່າກວ່າຈະສະເຫຼງຫຼາຍ:

coffee

opacity 0.2

coffee

opacity 0.5

coffee

opacity 1

ຄວາມນິຍົມ

img {
  opacity: 0.5;
}

Try It Yourself

ຜົນກະທົບສະຫຼາກສະເປພາບ

opacity ປະສົມປະກອບປະສານທີ່ປົກກະຕິກັບ :hover ການຫານວຽກກັບ selector ເພື່ອທົດສະມັກຄວາມກະຈັງຫັດຫັງໃນການລຸກຈອນ:

Tulip
Tulip
ຕົວກະດີ

ຄວາມນິຍົມ

img {
  opacity: 0.5;
}
img:hover {
  opacity: 1.0;
}

Try It Yourself

Example Explanation

ບົດ CSS ຄົນທຳອິດຄືກັບລາຍການ 1. ນອກຈາກນັ້ນພວກເຮົາຍັງໄດ້ເພີ່ມຜົນກະທົບທີ່ຈະເປັນຫັດຫັງຖ້າຜູ້ນຳມືດຢູ່ເທື່ອງໜຶ່ງ. ໃນກໍລະນີນັ້ນຖ້າຜູ້ນຳມືດຢູ່ເທື່ອງພວກເຮົາຫວັງວ່າຮູບພາບຈະບໍ່ສະຫຼາກ. ຄຳ CSS ນີ້ ແມ່ນ opacity:1;.

ເມື່ອຂັບເຄື່ອງມືຂອງມຸມມຸດອອກຈາກພາບ, ພາບຈະຖືກສະຫຼາກຄວາມບໍ່ປະກົດອີກຄັ້ງ.

ຕົວຢ່າງຂອງຄວາມບໍ່ປະກົດທີ່ຫັນກັບ:

Tulip
Tulip
ຕົວກະດີ

ຄວາມນິຍົມ

img:hover {
  opacity: 0.5;
}

Try It Yourself

ຂອບຮູບລັບ

ນໍາໃຊ້ opacity ທີ່ພະຍາດ opacity ແມ່ນຕິດຕາມສິ່ງຂອງສິນລະດັບສອງ, ທີ່ສາມາດເຮັດໃຫ້ຄຳຂຽນທີ່ຢູ່ໃນສິນລະດັບບໍ່ປະກົດມີຄວາມຫຼາຍຢ່າງບໍ່ດີ:

opacity 1
opacity 0.6
opacity 0.3
opacity 0.1

ຄວາມນິຍົມ

div {
  opacity: 0.3;
}

Try It Yourself

ນໍາໃຊ້ຄວາມບໍ່ປະກົດ RGBA

ຖ້າທ່ານບໍ່ຕ້ອງຈະນໍາໃຊ້ຄວາມບໍ່ປະກົດຂອງລູກສອງລະດັບ, ອີງຕາມຕົວຢ່າງດັ່ງກ່າວ, ທ່ານຈະໃຊ້ຄວາມສີ RGBA. ຕົວຢ່າງດັ່ງກ່າວນີ້ກໍານົດສີຫຼັງສີບໍ່ປະກົດວ່າຄຳຂຽນ:

100% opacity
60% opacity
30% opacity
10% opacity

ທ່ານໄດ້ບັນລຸໄດ້ຈາກ ຄູ່ມວຍການ CSS ສີ ບັນດາຄວາມທີ່ພົບໄດ້ໃນຫນັງນີ້ກໍ່ສາມາດໃຊ້ RGB ເປັນຄວາມສີ - ນອກຈາກ RGB, ທ່ານຈະສາມາດໃຊ້ຄວາມສີ RGB ກັບສະນະພາບ alpha (RGBA) - ສະນະພາບນີ້ກໍານົດຄວາມບໍ່ປະກົດຂອງສີ.

RGBA ສີທີ່ກໍານົດເປັນ: rgba(red, green, blue, alpha) alpha ພະຍາດແມ່ນຈຳນວນທີ່ຢູ່ໃນລະດັບ 0.0 (ບໍ່ປະກົດ) ແລະ 1.0 (ບໍ່ປະກົດ) ຕັ້ງຢູ່ລະດັບຕົວເລກ.

ຄຳແນະນຳ:ທ່ານຈະພົບໃນ ຄູ່ມວຍການ CSS ສີ ບັນດາຄວາມທີ່ພົບໄດ້ໃນຫນັງນີ້.

ຄວາມນິຍົມ

div {
  background: rgba(76, 175, 80, 0.3) /* ຄວາມບໍ່ປະກົດຂອງສີ 30% ຂອງສີຂຽວ */
}

Try It Yourself

ຄຳຂຽນໃນຂອບຮູບລັບ

ນີ້ແມ່ນຄຳຂຽນທີ່ຢູ່ໃນຂອບຮູບລັບ.

ຄວາມນິຍົມ

<html>
<head>
<style>
div.background {
  background: url(klematis.jpg) repeat;
  border: 2px solid black;
}
div.transbox {
  margin: 30px;
  background-color: #ffffff;
  border: 1px solid black;
  opacity: 0.6;
}
div.transbox p {
  margin: 5%;
  font-weight: bold;
  color: #000000;
}
</style>
</head>
<body>
<div class="background">
  <div class="transbox">
    <p>This is some text inside a transparent box.</p>
  </div>
</div>
</body>
</html>

Try It Yourself

Example Explanation

First, we create a <div> element with a background image and border (class="background").

Then, we create another <div> (class="transbox") in the first <div>.

<div class="transbox"> Has background color and border - this div is transparent.

In a transparent <div>, we added some text in the <p> element.