Cách thiết lập vùng vẽ nền (background-clip) bằng JavaScript

Thuộc tính backgroundClip xác định vùng mà nền (màu hoặc hình ảnh) được vẽ — có thể giới hạn trong border-box, padding-box hoặc content-box. Điều này hữu ích khi bạn có viền trong suốt hoặc padding lớn và muốn kiểm soát nền không bị tràn ra viền.

Ví dụ minh họa

Đoạn mã dưới đây thay đổi background-clip từ border-box (mặc định) sang content-box khi nhấn nút:

<!DOCTYPE html>
<html>
<head>
  <style>
    #box {
      border: 2px dashed green;
      padding: 35px;
      width: 600px;
      height: 400px;
      background-color: blue;
      background-clip: border-box; /* Mặc định: nền vẽ đến viền ngoài */
      color: white;
      font-family: sans-serif;
    }
  </style>
</head>
<body>
  <button onclick="changeClip()">Đặt vùng vẽ = content-box</button>
  <div id="box">
    Văn bản demo! Văn bản demo! Văn bản demo! Văn bản demo! Văn bản demo! Văn bản demo!
  </div>
  <script>
    function changeClip() {
      document.getElementById("box").style.backgroundClip = "content-box";
      /* Nền giờ chỉ vẽ trong khu vực content, không bao padding hay border */
    }
  </script>
</body>
</html>

Ba giá trị chính của backgroundClip

Ứng dụng thực tế: Tạo hiệu ứng chữ có nền hình ảnh/gradient bằng background-clip: text kết hợp color: transparent.