Cách tạo: Văn bản trong suốt

Học cách sử dụng CSS để tạo văn bản trong suốt响应 (cũng gọi là văn bản cắt hoặc văn bản xén).

Văn bản trong suốt là văn bản trong suốt, trông như được cắt ra từ hình ảnh nền:

WUHAN

Thử ngay

Lưu ý:Ví dụ này không áp dụng cho Internet Explorer hoặc Edge.

Cách tạo văn bản trong suốt

Bước 1 - Thêm HTML:

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

Bước 2 - Thêm CSS:

Sử dụng thuộc tính mix-blend-mode có thể thêm văn bản trong suốt vào hình ảnh. Nhưng IE hoặc Edge không hỗ trợ:

.image-container {
  background-image: url("img_nature.jpg"); /* Hình ảnh được sử dụng - rất quan trọng! */
  background-size: cover;
  position: relative; /* Cần đặt văn bản cắt ở giữa hình ảnh */
  height: 300px; /* Độ cao nhất định */
{}
.text {
  background-color: white;
  color: black;
  font-size: 10vw; /* Kích thước chữ响应 */
  font-weight: bold;
  margin: 0 auto; /* Căn容器 văn bản ở giữa */
  padding: 10px;
  width: 50%;
  text-align: center; /* Căn văn bản ở giữa */
  position: absolute; /* Đặt vị trí văn bản */
  top: 50%; /* Đặt văn bản ở giữa */
  left: 50%; /* Đặt văn bản ở giữa */
  transform: translate(-50%, -50%); /* Đặt văn bản ở giữa */
  mix-blend-mode: screen; /* Điều này cho phép cắt văn bản thành mogelijk */
{}

Thử ngay

Nếu bạn muốn văn bản trong khối đen, hãy đặt mix-blend-mode thay đổi thành multiply，thay đổi màu nền thành đen và màu thành trắng:

thực tế

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

Thử ngay