CSS ການຕັດຕັງພາບ

ບັນລຸການນຳໃຊ້ CSS ເພື່ອການຕັດຕັງພາບ.

ພາບທີ່ມີຫຼັງສະໜາດ

ໃຊ້ border-radius ສຳລັບທີ່ຈະສ້າງພາບທີ່ມີຫຼັງສະໜາດທີ່ຫຼາຍຄວາມຮູ້ຈະໃຊ້ປະສົມປະສານ.

ຕົວຢ່າງ

ພາບທີ່ມີຫຼັງສະໜາດ:

img {
  border-radius: 8px;
}

親自試一试

ຕົວຢ່າງ

ພາບຂຽວ:

img {
  border-radius: 50%;
}

親自試一试

ພາບສະເພາະ

ໃຊ້ border ສຳລັບທີ່ຈະສ້າງພາບສະເພາະທີ່ຫຼາຍຄວາມຮູ້ຈະໃຊ້ປະສົມປະສານ.

ພາບສະເພາະ:

Coffee

ຕົວຢ່າງ

img {
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 5px;
  width: 150px;
}
<img src="paris.jpg" alt="Paris">

親自試一试

ເປັນພາບສະເພາະທີ່ເປັນລາຍການທາງນາວ:

ຕົວຢ່າງ

img {
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 5px;
  width: 150px;
}
img:hover {
box-shadow: 0 0 2px 1px rgba(0, 140, 186, 0.5);
}
<a href="paris.jpg">
  <img src="paris.jpg" alt="Paris">
</a>

親自試一试

ພາບທີ່ປະຕິບັດສະແດງ

ພາບທີ່ປະຕິບັດສະແດງທີ່ຫຼາຍຄວາມຮູ້ຈະຫຼຸດຕົວຕາມຂະໜາດໜ້າຈໍານວນທີ່ຫຼາຍຄວາມຮູ້.

ຖ້າທ່ານຢາກຫຼຸດຕົວພາບຕາມສະຫຼາດທີ່ຈະຫຼຸດຕົວພາບລະດັບຫຼາຍກວ່າຂັ້ນຕົ້ນຂອງພາບແຕ່ບໍ່ຕ້ອງການຂະຫຍາຍຕົວພາບມາຫຼາຍກວ່າຂັ້ນຕົ້ນຂອງພາບແລ້ວການແລະນຳເອົາລັກສະນະທີ່ຫຼັງກ່າວນີ້:

ຕົວຢ່າງ

img {
  max-width: 100%;
  height: auto;
}

親自試一试

提示：ໃນບອກຂອງພວກເຮົາ CSS RWD 教程 ບັນລຸຂໍ້ມູນຂອງການອອກແບບວິທະຍາສາດທີ່ປະຕິບັດສະແດງທີ່ຫຼາຍຄວາມຮູ້ຕາມການກຳລັງຮຽນ.

ປະຕິບັດສູນກາງພາບ

ສຳລັບທີ່ຈະປະຕິບັດສູນກາງພາບຂອງທ່ານ，ການຕັດຂ້າງຫຼັງສາຍຂອງທ່ານແມ່ນ: auto ແລະການຕັດເພີ່ມເປັນປະກອບສະຖານທີ່ເສື້ອ:

Coffee

ຕົວຢ່າງ

img {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 50%;
}

親自試一试

ບາໂລໄລຍະຢູ່ / ກາງກາບ

Tulip

ສີສົ້ມກະຂົດ

Tulip

ສີສົ້ມສົມກຸດ

ຕົວຢ່າງ

div.polaroid {
  width: 80%;
  background-color: white;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
img {width: 100%}
div.container {
  text-align: center;
  padding: 10px 20px;
}

親自試一试

透明图像

opacity 属性的取值范围为 0.0 - 1.0。值越低，越透明：

Tulip

opacity 0.2

Tulip

opacity 0.5

Tulip

opacity 1（默认）

ຕົວຢ່າງ

img {
  opacity: 0.5;
}

親自試一试

图像文本

如何在图像中定位文本：

ຕົວຢ່າງ

CodeW3C.com Logo
Bottom Left
Top Left
Top Right
Bottom Right
Centered

ທີ່ພວກເຮົາຈະທົດລອງ:

ຊ້າຍຕົວຕົວ ຊ້າຍຕົວລຸ່ມ ຊ້າຍຕົວ ຊ້າຍລຸ່ມ ສູນກາງ

ສະແດງສາຍສາຍພິດຈະວັດ

CSS filter ປະສົມປະສົມທີ່ສະແດງສິ່ງທີ່ພິດຈະວັດ (ເຊັ່ນ: ສະແດງບານບານແລະຄວາມຄຸ້ມຄອງ):

ຄວາມຕ້ອງການ:Internet Explorer ຫລື Edge 12 ບໍ່ສາມາດສະໜັບສະໜູນຄວາມເປັນປະສົມ filter:

ຕົວຢ່າງ

ປ່ຽນສີຂອງປະຕູບານທັງໝົດເປັນສີສີສີສີ (100% ສີສີສີ):

img {
  filter: grayscale(100%);
}

親自試一试

提示：ການຢ້ຽມຢາມຫາພວກເຮົາ: ຊື່ວາທີ່ຂອງ CSS filter،ຫາຫຍັງທີ່ຂໍ້ມູນຂອງ CSS filter:

ສະແດງສາຍສາຍພິດຈະວັດຕະວັດພິດຈະວັດພິດຈະວັດ

ສ້າງການພິມຂອງຄຳສັບສະໄໝໃນປະຕູບານ:

ຕົວຢ່າງ 1

ການລະບາຍສານຄວາມ:

Avatar
Hello World

親自試一试

ຕົວຢ່າງ 2

ການລະບາຍປະຕູບານ:

Avatar
Bill

親自試一试

ຕົວຢ່າງ 3

ລະເບີດເຂົ້າມາດ້ວຍປະຕູບານຕົວ:

Avatar
Hello World

親自試一试

ຕົວຢ່າງ 4

ລະເບີດເຂົ້າມາດ້ວຍປະຕູບານລຸ່ມ:

Avatar
Hello World

親自試一试

ຕົວຢ່າງ 5

ລະເບີດເຂົ້າມາດ້ວຍປະຕູບານຊ້າຍ:

Avatar
Hello World

親自試一试

ຕົວຢ່າງ 6

ລະເບີດເຂົ້າມາດ້ວຍປະຕູບານຂວາ:

Avatar
Hello World

親自試一试

ລະຫວ່າງສາຍສາຍ

ກະຈາຍໄມ້ສະໄໝຫາສາຍສາຍ:

ສະໜາມກິລາ

ຕົວຢ່າງ

img:hover {
  transform: scaleX(-1);
}

親自試一试

ສະແດງສາຍສາຍພິດຈະວັດຕະວັດພິດຈະວັດ

ພວກເຮົາສາມາດໃຊ້ CSS ໃນການສ້າງສະແດງສາຍສາຍພິດຈະວັດຕະວັດພິດຈະວັດ:

ບົດການນີ້ໃຊ້ການຊອກຫາສະແດງສັນຈອນຂອງສາຍສາຍສະແດງຕາມຂະໜາດຂອງໜ້າຈໍ. ຂໍ້ສະເໜີການປ່ຽນຂະໜາດປະຕູບານທີ່ຂ້າພະເຈົ້າເບິ່ງຜົນ:

ຕົວຢ່າງ

.responsive {
  padding: 0 6px;
  float: left;
  width: 24.99999%;
}
@media only screen and (max-width: 700px){
  .responsive {
    width: 49.99999%;
    margin: 6px 0;
  }
}
@media only screen and (max-width: 500px){
  .responsive {
    width: 100%;
  }
}

親自試一试

提示：請在我們的 CSS RWD 教程 中學習有關響應式 Web 設計的更多知識。

圖像模態（Image Modal）

這是一個演示 CSS 和 JavaScript 如何協同工作的例子。

首先，請使用 CSS 創建模態窗口（對話框），並默認將其隱藏。

然後，當用戶點擊圖像時，使用 JavaScript 顯示模態窗口並在模態內部顯示圖像：

ສະໜາມສີຂຽວ

親自試一试