ແນວທາງ:

ພວກມັນບໍ່ຕົກມີການກວດສອບໃຫ້ທີ່ Internet Explorer ຫຼື Edge.

ການບັນທຶກທີໜຶ່ງ - ຕັດຕັບ HTML:

<div class="image-container">
  <div class="text">NATURE</div>
</div>

ການບັນທຶກທີສອງ - ຕັດຕັບ CSS:

ການໃຊ້ປະສົມປະສານ mix-blend-mode ສາມາດຕັດຕັບມີຄວາມທີ່ບາງສຳລັບຮູບມີຄວາມທີ່ບາງ: ແຕ່ IE ຫຼື Edge ບໍ່ສາມາດສະໜັບສະໜູນ:

.image-container {
  background-image: url("img_nature.jpg"); /* ຮູບທີ່ໃຊ້ - ສິ່ງທີ່ສຳຄັນ! */
  background-size: cover;
  position: relative; /* ຕັດຕັບມີຄວາມ */
  height: 300px; /* ຂະໜາດສູງຄົງ */
}
.text {
  background-color: white;
  color: black;
  font-size: 10vw; /* ຂະໜາດມູນລະດັບສະແດງທີ່ພິການ */
  font-weight: bold;
  margin: 0 auto; /* ຕັດຕັບມີຄວາມກາງ */
  padding: 10px;
  width: 50%;
  text-align: center; /* ຕັດຕັບມີຄວາມກາງ */
  position: absolute; /* ຕັດຕັບມີຄວາມ */
  top: 50%; /* ຕັດຕັບມີຄວາມກາງ */
  left: 50%; /* ຕັດຕັບມີຄວາມກາງ */
  transform: translate(-50%, -50%); /* ຕັດຕັບມີຄວາມກາງ */
  mix-blend-mode: screen; /* ສາມາດຕັດຕັບມີຄວາມເປັນໄປໄດ້ */
}

亲自试一试

ຖ້າເຈົ້າຕ້ອງການເງິນອອກສຳລັບສຳລັບສະເພາະນີ້: mix-blend-mode ເປັນ multiplyວ່າຈະປ່ຽນເງິນອອກສຳລັບສຳລັບສະເພາະບັນດາສະເພາະນີ້:

ຄວາມຄິດ

.text {
  background-color: black;
  color: white;
  mix-blend-mode: multiply;
  ....
}

亲自试一试