Thuộc tính background-clip

Thuộc tính background-clip xác định cách mà màu tô nền hoặc hình ảnh nền sẽ được đặt tương đối với phần tử: dưới đường viền, chỉ bên trong padding hoặc chỉ trên nội dung.

Đặc điểm

Khi sử dụng border-box với đường viền trong suốt, hình nền sẽ hiển thị bên dưới chúng
Giá trị text yêu cầu tiền tố nhà cung cấp (vendor prefix) để được hỗ trợ đầy đủ
Thuộc tính hoạt động với gradient và nhiều hình nền
Khi có border-radius, hình nền bị cắt theo các góc bo tròn

Hỗ trợ trình duyệt

Tất cả các trình duyệt hiện đại hỗ trợ border-box, padding-box và content-box. Giá trị text yêu cầu tiền tố -webkit- và được hỗ trợ trong Chrome, Safari, Edge.

Cú pháp

bộ chọn {
	background-clip: border-box | padding-box | content-box | text;
}

Các giá trị

Giá trị	Mô tả
`border-box`	Hình nền mở rộng ra đến mép ngoài của đường viền (bên dưới đường viền).
`padding-box`	Hình nền bị cắt theo mép trong của đường viền (không đi vào dưới `border`).
`content-box`	Hình nền chỉ hiển thị trên nội dung (bị cắt bởi `padding`).
`text`	Hình nền bị cắt theo chữ.

Giá trị mặc định: border-box.

Ví dụ . Giá trị border-box

Hình nền đi vào dưới đường viền bán trong suốt:

<div id="elem"></div>

#elem {
	background-clip: border-box;
	background-color: #ffd6d6;
	background-repeat: no-repeat;
	border: 10px dashed rgba(0,0,0,0.3);
	padding: 30px;
	width: 250px;
	height: 150px;
}

Ví dụ . Giá trị padding-box

Hình nền không đi vào dưới đường viền:

<div id="elem"></div>

#elem {
	background-clip: padding-box;
	background-color: #ffd6d6;
	background-repeat: no-repeat;
	border: 10px dashed rgba(0,0,0,0.5);
	padding: 30px;
	width: 250px;
	height: 150px;
}

Ví dụ . Giá trị content-box

Hình nền không đi vào padding:

<div id="elem">
	văn bản văn bản văn bản văn bản văn bản
	văn bản văn bản văn bản văn bản văn bản
	văn bản văn bản văn bản văn bản văn bản
</div>

#elem {
	background-clip: content-box;
	background-color: #ffd6d6;
	background-repeat: no-repeat;
	border: 10px dashed rgba(0,0,0,0.3);
	padding: 30px;
	width: 250px;
	height: 150px;
}

Ví dụ . Giá trị text

Hình nền bị cắt theo chữ (yêu cầu -webkit-text-fill-color với giá trị transparent):

<div id="elem">văn bản văn bản văn bản</div>

#elem {
	display: inline-block;
	background: linear-gradient(to right, red, blue);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
	
	font-size: 40px;
	font-weight: bold;
}

Xem thêm

thuộc tính background,
là thuộc tính viết tắt cho hình nền
thuộc tính background-origin,
xác định vị trí bắt đầu của hình nền