Trang chủ » blog » Cách thiết lập hình nền (Background Image) cho phần tử trong CSS
articlewriting1 3

Cách thiết lập hình nền (Background Image) cho phần tử trong CSS

Cách thiết lập hình nền cho một phần tử HTML

Hình nền là gì ! ?
– Hình nền là hình nằm bên dưới thành phần ( dùng để làm nền cho thành phần )
– Các nội dung của thành phần sẽ hiển thị đè lên hình nền .

– Ví dụ như phần tử này có hình nền là hai bố con nhà mèo đang ôm nhau ngủ.

1) Cách thiết lập hình nền cho phần tử

– Để thiết lập hình nền cho một phần tử thì chúng ta cần phải thiết lập thuộc tính background-image cho phần tử đó với cú pháp như sau:

background-image: value;

– Trong đó, value hoàn toàn có thể được xác lập dựa theo một trong bốn loại giá trị :

none – Không thiết lập hình nền cho thành phần . Xem ví dụ
url() – Chỉ định một tập tin hình ảnh dùng làm hình nền cho thành phần .
( đường dẫn đến tập tin hình ảnh phải được đặt bên trong cặp dấu ngoặc )
Xem ví dụ
initial – Sử dụng giá trị mặc định của nó .
( mặc định thì thuộc tính background-image có giá trị là none )
Xem ví dụ
inherit – Kế thừa giá trị thuộc tính background-image từ thành phần cha của nó . Xem ví dụ

– Lưu ý: Chúng ta có thể gán nhiều giá trị url() cho thuộc tính background-image để hòa trộn nhiều tập tin hình ảnh lại với nhau (Xem ví dụ)

– Tuy nhiên, việc sử dụng nhiều tấm hình để thiết lập hình nền cho thành phần chỉ thích hợp khi những tấm hình đó có định dạng là GIF hoặc PNG ( loại hình ảnh có một số ít vị trí trong suốt ). Nếu sử dụng mô hình không có phần trong suốt thì nó sẽ nằm ” đè trọn vẹn ” lên tấm hình bên dưới, khiến tấm hình bên dưới không được hiển thị ( Xem ví dụ )

2) Điều chỉnh phạm vi được thiết lập hình nền

– Trong những bài học kinh nghiệm trước thì tôi đã có ra mắt sơ qua với những bạn về cấu trúc của một thành phần HTML rồi, nó gồm có bốn thành phần chính : margin border padding content
marginborderpaddingcontent

– Khi chúng ta sử dụng thuộc tính background-image để thiết lập hình nền cho phần tử thì mặc định phạm vi được thiết lập hình nền sẽ bắt đầu từ phần border cho đến hết phần content

marginborderpaddingcontent

– Tuy nhiên, với việc sử dụng thuộc tính background-clip thì chúng ta có thể điều chỉnh lại phạm vi được thiết lập hình nền của phần tử.

background-clip: value;

– Trong đó, value hoàn toàn có thể được xác lập dựa theo một trong những giá trị sau đây :

border-box – Phạm vi được thiết lập hình nền sẽ gồm có ba phần :

  • border
  • padding
  • content
Xem ví dụ
padding-box – Phạm vi được thiết lập hình nền sẽ gồm có hai phần :

  • padding
  • content
content-box – Phạm vi được thiết lập hình nền chỉ gồm có phần : content
initial – Sử dụng giá trị mặc định của nó .
( mặc định thì thuộc tính background-clip có giá trị là border-box )
inherit – Kế thừa giá trị thuộc tính background-clip từ thành phần cha của nó .

3) Tùy chỉnh cách thức “lặp lại” của hình nền

– Khi tất cả chúng ta thiết lập hình nền cho một thành phần, nếu tấm hình được dùng làm hình nền có kích cỡ nhỏ hơn kích cỡ của thành phần thì mặc định tấm hình sẽ ” tự động hóa tái diễn ” để lấp đầy thành phần .

– Tuy nhiên, với việc sử dụng thuộc tính background-repeat thì chúng ta có thể tùy chỉnh việc lặp lại của hình nền (chẳng hạn như chỉ lặp lại theo chiều ngang, chiều dọc, hoặc không lặp lại,. .. .)

background-repeat: value;

– Trong đó, value hoàn toàn có thể được xác lập dựa theo một trong sáu loại giá trị :

repeat – Tấm hình lặp lại theo chiều ngang lẫn chiều dọc . Xem ví dụ
repeat-x – Tấm hình chỉ lặp lại theo chiều ngang .
repeat-y – Tấm hình chỉ lặp lại theo chiều dọc .
no-repeat – Tấm hình không lặp lại .
initial – Sử dụng giá trị mặc định của nó .
( mặc định thì thuộc tính background-repeat có giá trị là repeat )
inherit – Kế thừa giá trị thuộc tính background-repeat từ thành phần cha của nó .

4) Thay đổi “vị trí gốc” trong việc thiết lập hình nền

– Vị trí gốc là vị trí Open của tấm hình gốc ( tấm hình gốc là tấm hình được dùng làm điểm trung tâm trong việc lặp lại của hình nền, nó cũng chính là hình nền khi tất cả chúng ta chỉnh chính sách không tái diễn )

– Mặc định thì vị trí gốc sẽ nằm ở ngay góc phía trên bên trái của phần padding, tuy nhiên chúng ta có thể thay đổi bằng cách sử dụng thuộc tính background-origin với cú pháp như sau:

background-origin: value;

– Trong đó, value hoàn toàn có thể được xác lập dựa theo một trong năm loại giá trị :

border-box – Vị trí gốc sẽ nằm ở góc phía trên bên trái của phần border . Xem ví dụ
padding-box – Vị trí gốc sẽ nằm ở góc phía trên bên trái của phần padding .
content-box – Vị trí gốc sẽ nằm ở góc phía trên bên trái của phần content .
initial – Sử dụng giá trị mặc định của nó .

(mặc định thì background-origin có giá trị là padding-box)

inherit – Kế thừa giá trị thuộc tính background-origin từ thành phần cha của nó

5) Thiết lập vị trí của hình nền

– Khi chúng ta thiết lập hình nền cho một phần tử, mặc định hình nền sẽ nằm ở ngay vị trí gốc. Nếu muốn thiết lập lại vị trí cho hình nền thì chúng ta cần phải sử dụng thuộc tính background-position với cú pháp như sau:

background-position: value;

– Trong đó, value hoàn toàn có thể được xác lập dựa theo một những loại giá trị sau đây :

X Y – X là vị trí của hình nền ” xét theo chiều ngang “, nó hoàn toàn có thể được xác lập dựa theo một trong những loại giá trị như sau :

Tên vị trí : left center right
Npx : Hình nền nằm cách vị trí gốc một khoảng chừng N px .
N% : Hình nền nằm cách vị trí gốc một khoảng chừng N % .

– Y là vị trí của hình nền ” xét theo chiều dọc “, nó hoàn toàn có thể được xác lập dựa theo một trong những loại giá trị như sau :

Tên vị trí : top center bottom
Npx : Hình nền nằm cách vị trí gốc một khoảng chừng N px .
N% : Hình nền nằm cách vị trí gốc một khoảng chừng N % .

– Lưu ý : Đối với loại giá trị X Y, nếu tất cả chúng ta chỉ xác lập một tham số thì tham số đó chính là X, tham số Y sẽ mặc định là center .

Xem ví dụ
initial – Sử dụng giá trị mặc định của nó .
inherit – Kế thừa giá trị thuộc tính background-position từ thành phần cha của nó .

6) Chỉnh kích thước của hình nền

– Khi chúng ta thiết lập hình nền cho một phần tử thì mặc định hình nền sẽ có kích thước bằng với kích thước của tấm hình được dùng làm hình nền (Xem ví dụ). Nếu muốn thiết lập lại kích thước cho hình nền thì chúng ta cần phải sử dụng thuộc tính background-size với cú pháp như sau:

background-size: value;

– Trong đó, value hoàn toàn có thể được xác lập dựa theo một những loại giá trị bên dưới :

width height – width là chiều rộng của hình nền, nó hoàn toàn có thể được xác lập dựa theo một trong những loại giá trị như sau :

auto : – Chiều rộng của hình nền sẽ tự động hóa được xác lập dựa theo chiều cao của hình nền ( với điều kiện kèm theo là tỷ suất chiều rộng / cao của hình nền phải bằng với tỷ suất chiều rộng / cao của tấm hình được sử dụng làm hình nền )
Npx : – Hình nền sẽ có chiều rộng là N px .
N% : – Hình nền sẽ có chiều rộng bằng N % chiều rộng của vùng được dùng để thiết lập vị trí gốc .

– height là chiều cao của hình nền, nó hoàn toàn có thể được xác lập dựa theo một trong những loại giá trị như sau :

auto : – Chiều cao của hình nền sẽ tự động hóa được xác lập dựa theo chiều rộng của hình nền ( với điều kiện kèm theo là tỷ suất chiều rộng / cao của hình nền phải bằng với tỷ suất chiều rộng / cao của tấm hình được sử dụng làm hình nền )
Npx : – Hình nền sẽ có chiều cao là N px .
N% : – Hình nền sẽ có chiều cao bằng N % độ cao của vùng được dùng để thiết lập vị trí gốc .

– Lưu ý : Đối với loại giá trị width height, nếu tất cả chúng ta chỉ xác lập một tham số thì tham số đó chính là width, tham số height sẽ mặc định là auto .

Xem ví dụ
cover – Hình nền sẽ tự động hóa được phóng to ra hoặc thu nhỏ lại để lấp đầy vùng được dùng để thiết lập vị trí gốc. Tuy nhiên, nếu gặp phải trường hợp tỷ suất chiều rộng / cao của thành phần khác với tỷ suất chiều rộng / cao của tấm hình được dùng làm hình nền thì sẽ xảy ra thực trạng hình nền bị tràn ra khỏi vùng được dùng để thiết lập vị trí gốc, dẫn đến việc hình nền hiển thị không toàn vẹn ( nó sẽ bị cắt xén phía dưới hoặc bên phải ) Xem ví dụ
contain – Hình nền sẽ tự động hóa phóng to ra hoặc thu nhỏ lại sao cho nó được hiển thị toàn vẹn ( không bị cắt xén ) với size lớn nhất hoàn toàn có thể bên trong vùng được dùng để thiết lập vị trí gốc . Xem ví dụ
initial – Sử dụng giá trị mặc định của nó .
( mặc định thì thuộc tính background-size có giá trị là auto )
inherit – Kế thừa giá trị thuộc tính background-size từ thành phần cha của nó .

7) Tùy chỉnh cách thức hiển thị của hình nền

– Thông thường thì hình nền có hai phương pháp hiển thị cơ bản :

  • Cách 1: Nó sẽ bị cuốn đi khi người dùng kéo thanh scroll (Xem ví dụ)
  • Cách 2: Nó sẽ nằm ở một vị trí cố định trên màn hình trình duyệt (Xem ví dụ)

– Mặc định thì hình nền sẽ bị cuốn đi khi người dùng kéo thanh scroll, nếu muốn thiết lập lại cách thức hiển thị của hình nền thì chúng ta phải sử dụng thuộc tính background-attachment với cú pháp như sau:

background-attachment: value

– Trong đó, value hoàn toàn có thể được xác lập dựa theo một trong năm loại giá trị :

scroll – Hình nền sẽ bị cuốn đi khi người dùng kéo thanh scroll . Xem ví dụ

– Tuy nhiên, nếu hình nền được thiết lập cho một phần tử nằm ở bên trong và phần tử đó có chứa thanh scroll thì hình nền sẽ nằm ở một vị trí cố định bên trong phần tử đó.

Xem ví dụ
local – Hình nền sẽ bị cuốn đi khi người dùng kéo thanh scroll . Xem ví dụ
fixed – Hình nền sẽ nằm ở một vị trí cố định và thắt chặt trên màn hình hiển thị trình duyệt .

– Lưu ý: Mặc định thì nó sẽ nằm ở góc phía trên bên trái của phần tử , nếu các bạn muốn thiết lập lại vị trí cho hình nền thì các bạn cần phải sử dụng kết hợp với thuộc tính background-position.

Xem ví dụ
initial – Sử dụng giá trị mặc định của nó .
( mặc định thì thuộc tính background-attachment có giá trị là scroll )
inherit – Kế thừa giá trị thuộc tính background-attachment từ thành phần cha của nó .

Source: https://chickgolden.com
Category : Blog

Post navigation

Leave a Comment

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *