cach thay doi mau chu bang css background

Cách thay đổi màu chữ bằng CSS background

Bạn muốn thay đổi màu chữ bằng CSS background, đây là một kỹ thuật thú vị để tạo hiệu ứng chữ đặc biệt, nơi màu sắc của chữ được lấy từ một hình nền hoặc gradient thay vì một màu đơn sắc.

Giày Sneaker Cao Su PU Mũi Tròn Thắt Dây Chéo Màu Trơn Giá gốc là: 140.000 ₫.Giá hiện tại là: 106.400 ₫.
Giày sandal nữ DILY thời trang gót vuông 5cm AA0295 Giá gốc là: 320.000 ₫.Giá hiện tại là: 219.000 ₫.

Mô tả

Tóm tắt

Cách thay đổi màu chữ bằng CSS background – Bạn muốn thay đổi màu chữ bằng CSS background, đây là một kỹ thuật thú vị để tạo hiệu ứng chữ đặc biệt, nơi màu sắc của chữ được lấy từ một hình nền hoặc gradient thay vì một màu đơn sắc.

Cách Thay Đổi Màu Chữ Bằng CSS Background

Để làm điều này, bạn sẽ cần kết hợp một vài thuộc tính CSS:

background-clip: text;: Đây là thuộc tính quan trọng nhất. Nó sẽ cắt (clip) phần nền (background) theo hình dạng của văn bản. Nghĩa là, chỉ những phần nào của background nằm dưới chữ mới được hiển thị.
-webkit-background-clip: text;: Thuộc tính này là phiên bản tiền tố của nhà cung cấp (vendor prefix) dành cho trình duyệt dựa trên WebKit (như Chrome, Safari, Edge mới). Hiện tại, để đảm bảo tương thích tốt nhất trên nhiều trình duyệt, bạn nên sử dụng cả hai.
color: transparent;: Bạn cần đặt màu chữ là trong suốt để lộ ra phần background bên dưới.
background-image hoặc background: Sử dụng thuộc tính này để đặt hình nền hoặc gradient mà bạn muốn dùng làm màu chữ.
background-size (Tùy chọn): Có thể cần thiết nếu bạn muốn kiểm soát kích thước của hình nền.
background-position (Tùy chọn): Để điều chỉnh vị trí của hình nền.

Ví dụ Cụ Thể

Dưới đây là một ví dụ minh họa cách thay đổi màu chữ bằng CSS background, sử dụng gradient và hình ảnh:

HTML

<!DOCTYPE html>
<html lang="vi">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Màu Chữ Bằng CSS Background</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            background-color: #f0f0f0;
            margin: 0;
        }

        .text-gradient, .text-image {
            font-size: 80px; /* Kích thước chữ lớn để dễ thấy hiệu ứng */
            font-weight: bold;
            text-transform: uppercase;
            margin: 20px 0;
            padding: 10px;
            background-color: #f0f0f0; /* Màu nền cho khối chứa chữ */
            border-radius: 10px;
            box-shadow: 0 4px 8px rgba(0,0,0,0.1);
        }

        /* Hiệu ứng màu chữ từ Gradient */
        .text-gradient {
            /* 1. Đặt background là một gradient */
            background-image: linear-gradient(to right, #6a11cb 0%, #2575fc 100%);
            /* 2. Cắt background theo hình dạng của chữ (Quan trọng!) */
            -webkit-background-clip: text; /* Dành cho trình duyệt WebKit */
            background-clip: text;
            /* 3. Đặt màu chữ trong suốt để lộ background */
            color: transparent;
            /* Để đảm bảo hiệu ứng trên các trình duyệt cũ hơn hoặc khi background-clip không được hỗ trợ hoàn toàn */
            -webkit-text-fill-color: transparent; /* Thay thế cho color: transparent trên một số trình duyệt cũ hơn */
        }

        /* Hiệu ứng màu chữ từ Hình ảnh */
        .text-image {
            /* 1. Đặt background là một hình ảnh */
            background-image: url('https://picsum.photos/800/400'); /* Thay thế bằng đường dẫn hình ảnh của bạn */
            background-size: cover; /* Đảm bảo hình ảnh phủ đầy phần background */
            background-position: center; /* Căn giữa hình ảnh */
            background-repeat: no-repeat; /* Không lặp lại hình ảnh */
            
            /* 2. Cắt background theo hình dạng của chữ (Quan trọng!) */
            -webkit-background-clip: text; /* Dành cho trình duyệt WebKit */
            background-clip: text;
            /* 3. Đặt màu chữ trong suốt để lộ background */
            color: transparent;
            -webkit-text-fill-color: transparent;
        }

        h2 {
            color: #333;
            margin-top: 50px;
        }
    </style>
</head>
<body>
    <h2>Màu Chữ Từ Gradient</h2>
    <div class="text-gradient">
        Hiệu ứng Gradient
    </div>

    <h2>Màu Chữ Từ Hình Ảnh</h2>
    <div class="text-image">
        Hiệu ứng Hình Ảnh
    </div>
</body>
</html>

Giải thích mã

background-image: linear-gradient(...): Tạo một màu chuyển sắc từ trái sang phải với hai màu tím và xanh dương.
background-image: url('...'): Sử dụng một hình ảnh làm nền. Bạn nên thay thế URL trong ví dụ bằng đường dẫn đến hình ảnh của riêng mình.
-webkit-background-clip: text; và background-clip: text;: Hai dòng này là “chìa khóa” để thực hiện hiệu ứng. Chúng sẽ “cắt” phần hình nền (gradient hoặc ảnh) để nó chỉ hiển thị bên trong các ký tự văn bản.
color: transparent;: Điều này làm cho màu sắc của văn bản trở nên trong suốt, cho phép phần background đã được cắt hiển thị qua.
-webkit-text-fill-color: transparent;: Đôi khi, thuộc tính color: transparent; không hoạt động hoàn hảo trên tất cả các trình duyệt WebKit cũ hơn hoặc một số phiên bản, nên việc thêm text-fill-color cũng giúp đảm bảo tương thích tốt hơn.