Clip nền - Thủ thuật CSS

Anonim

background-clip cho phép bạn kiểm soát mức độ ảnh nền hoặc màu vượt ra ngoài phần đệm hoặc nội dung của phần tử.

.frame ( background-clip: padding-box; )

Giá trị

  • border-boxlà giá trị mặc định. Điều này cho phép nền mở rộng ra đến mép ngoài của đường viền phần tử.
  • padding-box kẹp nền ở mép ngoài của phần đệm của phần tử và không để nó mở rộng ra đường viền.
  • content-boxcắt nền ở cạnh của hộp nội dung.
  • inheritáp dụng background-clipcài đặt của phần tử gốc cho phần tử đã chọn.

Bản trình diễn

background-clip được giải thích tốt nhất trong thực tế, vì vậy chúng tôi đã tổng hợp hai bản trình diễn để hiển thị cách hoạt động.

Trong bản demo đầu tiên, mỗi div có một đoạn bên trong nó. Đoạn văn là nội dung của div. Mỗi div có nền màu vàng và đường viền màu xanh nhạt bán trong suốt 5 pixel.

Xem background-clip Pen by CSS-Tricks (@ css-trick) trên CodePen.

Theo mặc định, hoặc với background-clip: border-boxthiết lập, nền màu vàng kéo dài đến mép ngoài của đường viền. Lưu ý rằng đường viền trông giống như màu xanh lục vì nền màu vàng bên dưới nó.

Khi background-clipthay đổi thành padding-box, màu nền sẽ dừng ở nơi kết thúc phần đệm của phần tử. Lưu ý rằng đường viền có màu xanh lam vì nền không được phép chảy vào đường viền.

Với background-clip: content-box, màu nền chỉ áp dụng cho chính nội dung của div, trong trường hợp này là phần tử đoạn đơn. Phần đệm và đường viền của div không có màu nền. Tuy nhiên, có một chi tiết nhỏ đáng nói: màu sắc không kéo dài vào lề của nội dung. Kiểm tra sự khác biệt giữa ví dụ đầu tiên và thứ hai với content-box.

Trong content-boxví dụ đầu tiên , lề mặc định của trình duyệt được áp dụng cho đoạn văn và các đoạn nền sau lề. Trong ví dụ thứ hai, lề được đặt thành 0 trong CSS và nền được cắt ở mép văn bản.

Tương tác tiếp theo này hiển thị background-clipvới một hình nền. Nội dung trong bản trình diễn này là một div trống nhỏ hơn.

Xem ví dụ tương tác về nền-clip bút của Timothy Miller (@tjacobdesign) trên CodePen.

Bản trình diễn này cũng áp dụng background-size: covervà background-repeat: no-repeatngoài background-clipviệc kiểm soát hình nền, nếu không sẽ lặp lại cho đến khi cắt bớt.

Bản văn

Có một phiên bản có tiền tố của nhà cung cấp này hoạt động để cắt nền thành văn bản. Để thấy được tác phẩm đó, văn bản cũng cần phải minh bạch. May mắn thay, có một thuộc tính màu văn bản có tiền tố nhà cung cấp khác có thể ghi đè hiệu quả color, giúp an toàn khi sử dụng vì nó có thể có dự phòng:

.background-clip-text ( /* if we can clip, do it */ -webkit-text-fill-color: transparent; -webkit-background-clip: text; /* what will show through the text ~ or ~ what will be the background of that element */ background: whatever; /* fallback text color ~ or ~ the actual color of text, so it better work on the background */ color: red; )

Firefox, Chrome và Safari hỗ trợ điều này.

Xem
văn bản Pen Lit của Chris Coyier (@chriscoyier)
trên CodePen.

Có liên quan

  • nền-tệp đính kèm
  • màu nền
  • hình nền
  • nền-nguồn gốc
  • nền-vị trí
  • Bối cảnh Lặp lại
  • kích thước nền

Nhiêu tai nguyên hơn

  • background-clip trong thông số CSS3
  • background-clip tại MDN
  • Mô hình hộp CSS

Hỗ trợ trình duyệt

Tất cả rõ ràng!

Trình duyệt Chrome Safari Firefox Opera I E Android iOS
1+ 3+ 4+ 10,5+ 9+ 4.1+ Làm