CSS Background nằm dưới text bằng background-clip

CSS background-clip là một thuộc tính mạnh mẽ cho phép bạn kiểm soát cách mà background được áp dụng dưới text. Trong bài viết này, chúng ta sẽ khám phá cách sử dụng background-clip để tạo hiệu ứng độc đáo và thu hút cho trang web của bạn.

I. Giới Thiệu về CSS Background-Clip

CSS background-clip là một thuộc tính cho phép xác định phạm vi của background image hoặc background color. Nó có thể nhận một trong ba giá trị chính:

1. border-box: Background mở rộng đến mép của phần tử, bao gồm cả phần border.
2. padding-box: Background chỉ mở rộng đến mép của phần tử, không tính border.
3. content-box: Background chỉ nằm ở phía sau phần nội dung của phần tử, không mở rộng qua padding hay border.

II. Sử Dụng CSS Background-Clip với Text

1. Hiệu Ứng Background-Clip Bình Thường

Để bắt đầu, hãy xem xét một ví dụ đơn giản với background-clip áp dụng cho một đoạn văn bản:

<-- HTML -->
<div class="example example-border-box">Border Box</div> 
<div class="example example-padding-box">Padding Box</div> 
<div class="example example-content-box">Content Box</div>

/* CSS */
.example {
background: linear-gradient(to right, #3498db, #2ecc71);
color: #fff;
padding: 20px;
font-size: 24px;
}

.example-border-box {
background-clip: border-box;
}

.example-padding-box {
background-clip: padding-box;
}

.example-content-box {
background-clip: content-box;
}

Trong ví dụ này, chúng ta có một đoạn văn bản với background gradient. Ba phiên bản khác nhau của đoạn văn bản này sử dụng ba giá trị background-clip khác nhau: border-box, padding-box, và content-box.

2. Ứng Dụng Background-Clip Dưới Text

Để áp dụng background-clip dưới text, chúng ta có thể sử dụng một background image hoặc một màu sắc phức tạp. Dưới đây là một ví dụ sử dụng background-clip để hiển thị một hình ảnh dưới text:

<-- HTML -->
<section class="hero-section">;
Your Text Here
</section>

/* CSS */
.hero-section {
position: relative;
text-align: center;
color: #fff;
font-size: 36px;
padding: 100px;
}

.hero-section::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('your-image.jpg');
background-size: cover;
background-clip: text;
-webkit-background-clip: text; /* Hỗ trợ cho Safari */
z-index: -1;
}

Trong ví dụ này, chúng ta sử dụng ::before để tạo một layer mới với background image, và chúng ta áp dụng background-clip: text để hiển thị hình ảnh dưới text.

Link tham khảo:

https://www.youtube.com/watch?v=QH8nZ5Ijsx4&ab_channel=smashtheshell

https://css-tricks.com/examples/ImageUnderText/

III. Kết Luận

Trong bài viết này, chúng ta đã khám phá cách sử dụng CSS background-clip để tạo hiệu ứng nền độc đáo dưới text. Bạn có thể tận dụng background-clip để làm cho trang web của mình trở nên sinh động và thú vị hơn. Hãy thử nghiệm và tùy chỉnh theo ý tưởng sáng tạo của bạn!