CSS background-origin property sử dụng như thế nào ?

CSS background-origin property là một trong những thuộc tính CSS giúp chúng ta điều chỉnh hình ảnh nền của trang web. Nó cho biết vị trí của khu vực đặt nền, tức là nguồn gốc của một hình ảnh nền. Thuộc tính này sẽ không hoạt động khi giá trị của thuộc tính background-attachment được thiết lập là cố định. Thuộc tính background-origin tương tự như thuộc tính background-clip, nhưng nó thay đổi kích thước hình nền thay vì cắt bớt. Mặc định, nguồn gốc của một phần tử là góc trên bên trái của màn hình. Nếu phần tử có nhiều hơn một hình ảnh nền, chúng ta có thể chỉ định một giá trị khác nhau của thuộc tính background-origin cho từng hình ảnh nền, phân tách bằng dấu phẩy. Mỗi hình ảnh sẽ phù hợp với giá trị tương ứng của thuộc tính background-origin.

Lập Trình Viên mời bạn cùng tham khảo chi tiết nội dung bên dưới. Bài viết này nằm trong chuyên đề hướng dẫn CSS từ cơ bản đến nâng cao tại dự án Phát Triển Website.

CSS background-origin property là gì ?

Thuộc tính CSS background-origin là một trong những thuộc tính CSS giúp chúng ta tạo nên các hình ảnh nền cho trang web. Thuộc tính này cho biết vị trí của khu vực đặt nền và giúp chúng ta điều chỉnh kích thước hình ảnh.

Nếu phần tử có nhiều hơn một hình ảnh nền, chúng ta có thể chỉ định một giá trị khác nhau của thuộc tính background-origin cho từng hình ảnh nền, phân tách bằng dấu phẩy để mỗi hình ảnh phù hợp với giá trị tương ứng của thuộc tính background-origin.

Ai sẽ dùng CSS background-origin property

Thuộc tính CSS background-origin được sử dụng rộng rãi trong thiết kế website. Những người làm việc trong lĩnh vực front-end, đặc biệt là các nhà phát triển web, sẽ sử dụng thuộc tính này để tạo ra các trang web đẹp mắt và chuyên nghiệp.

CSS background-origin property là một thuộc tính CSS giúp định vị vị trí hình ảnh nền của trang web. Khi chúng ta sử dụng thuộc tính này, nó sẽ thay đổi vị trí của hình ảnh nền và điều chỉnh kích thước hình ảnh.

Hướng dẫn CSS background-origin property

Để sử dụng thuộc tính CSS background-origin, chúng ta có thể tuân theo các bước sau:

1. Xác định phần tử HTML mà chúng ta muốn thiết lập hình ảnh nền.
2. Chọn giá trị cho thuộc tính background-origin. Có ba giá trị khác nhau, bao gồm padding-box, border-box và content-box.
3. Thiết lập giá trị của thuộc tính background-image nếu cần thiết.
4. Lưu và làm mới trang web để xem kết quả.

Ví dụ CSS background-origin property

CSS background-origin property cho phép bạn chỉ định vị trí của hình nền so với giới hạn của phần tử.

Giá trị mặc định của thuộc tính này là padding-box, có nghĩa là hình nền bắt đầu từ cạnh bên trong của phần tử.

Để chỉ định vị trí của hình nền so với giới hạn của phần tử, bạn có thể sử dụng một trong các giá trị sau:

• padding-box: Hình nền bắt đầu từ cạnh bên trong của phần tử.
• border-box: Hình nền bắt đầu từ cạnh bên ngoài của phần tử, bao gồm cả đường viền.
• content-box: Hình nền bắt đầu từ cạnh bên trong của phần tử, nhưng không bao gồm nội dung.

Ví dụ:

// Để đặt hình nền ở bên trong đường viền của một phần tử
div {
  background-origin: border-box;
}

Ví dụ này sẽ đặt hình nền ở bên trong đường viền của phần tử div.

Dưới đây là một số ví dụ cụ thể về cách sử dụng CSS background-origin property:

Để đặt hình nền ở bên trong đường viền của một phần tử, bạn có thể sử dụng background-origin: border-box;.

div {
  background-origin: border-box;
}

Để đặt hình nền ở bên trong phần tử, bao gồm cả nội dung, bạn có thể sử dụng background-origin: content-box;.

div {
  background-origin: content-box;
}

Để đặt hình nền ở bên trong phần tử, nhưng không bao gồm nội dung, bạn có thể sử dụng background-origin: padding-box;.

div {
  background-origin: padding-box;
}

Bạn có thể sử dụng CSS background-origin property để tạo ra các hiệu ứng nền thú vị và sáng tạo.

Dưới đây là một số ví dụ khác về cách sử dụng CSS background-origin property:

• Để tạo một phần tử có nền gradient bắt đầu từ bên ngoài của phần tử, bạn có thể sử dụng background-origin: border-box; và background-image: linear-gradient(to top, red, green, blue);.
• Để tạo một phần tử có nền hình ảnh bắt đầu từ bên trong của phần tử, bạn có thể sử dụng background-origin: content-box; và background-image: url("image.png");.
• Để tạo một phần tử có nền màu bắt đầu từ bên trong của phần tử, bạn có thể sử dụng background-origin: content-box; và background-color: red;.

Ưu và Nhược điểm CSS background-origin property

Có nhiều ưu điểm khi sử dụng thuộc tính CSS background-origin:

• Cho phép chúng ta tạo các hình ảnh nền đẹp mắt và chuyên nghiệp cho trang web.
• Thuận tiện khi có nhiều hình ảnh nền trong một phần tử, thuộc tính background-origin cho phép chúng ta chỉ định vị trí khác nhau cho từng hình ảnh nền.
• Tùy chọn giá trị padding-box, border-box và content-box cho phép lựa chọn vị trí của hình ảnh nền.

Tuy nhiên, cũng có một số nhược điểm:

• Khi giá trị của thuộc tính background-attachment được thiết lập là cố định, thuộc tính background-origin sẽ không hoạt động.
• Không thể cắt bớt một phần hình ảnh nền bởi vì thuộc tính này sử dụng để điều chỉnh kích thước hình ảnh.

Lời khuyên CSS background-origin property

Khi sử dụng thuộc tính CSS background-origin, chúng ta cần lưu ý rằng giá trị padding-box, border-box và content-box sẽ ảnh hưởng đến vị trí và kích thước của hình ảnh nền. Nếu chúng ta muốn chỉ định vị trí khác nhau cho từng hình ảnh nền, chúng ta cần phân tách giá trị của thuộc tính background-origin bằng dấu phẩy.