Cách thực hiện - Văn bản cắt bỏ
Tìm hiểu cách tạo văn bản cắt/loại bỏ đáp ứng bằng CSS.
Văn bản bị cắt bỏ (hoặc văn bản bị loại bỏ) là văn bản nhìn xuyên qua xuất hiện bị cắt ra phía trên hình nền:
Lưu ý: Ví dụ này không hoạt động trong Internet Explorer hoặc Edge.
Cách tạo văn bản cắt bỏ
Bước 1) Thêm HTML:
Ví dụ
<div class="image-container">
<div class="text">NATURE</div>
</div>
Bước 2) Thêm CSS:
Thuộc tính mix-blend-mode
cho phép thêm văn bản bị cắt vào hình ảnh. Tuy nhiên, nó không được hỗ trợ trong IE hoặc Edge:
Ví dụ
.image-container {
background-image: url("img_nature.jpg");
/* The image used - important! */
background-size: cover;
position: relative; /* Needed to position
the cutout text in the middle of the image */
height: 300px; /* Some
height */
}
.text {
background-color: white;
color: black;
font-size: 10vw;
/* Responsive font size */
font-weight: bold;
margin: 0 auto; /* Center the text container */
padding: 10px;
width: 50%;
text-align: center; /* Center text */
position: absolute; /* Position text */
top: 50%; /* Position text in the middle */
left: 50%; /* Position
text in the middle */
transform: translate(-50%, -50%); /* Position text in the middle */
mix-blend-mode: screen;
/* This makes the cutout text possible */
}
Hãy tự mình thử »Nếu bạn muốn văn bản chứa màu đen, hãy thay đổi chế độ hòa trộn thành "nhân" và màu nền thành màu đen và màu thành màu trắng:
Ví dụ
.text {
background-color: black;
color: white;
mix-blend-mode:
multiply;
....
}
Hãy tự mình thử »