Nền: url css

- Lưu ý. Việc sử dụng nhiều tấm hình để thiết lập hình nền cho phần tử chỉ thích hợp khi các tấm hình đó thuộc định dạng GIF hoặc PNG (loại hình ảnh có một số vị trí trong suốt). Nếu sử dụng loại hình không có phần trong suốt, thì nó sẽ đảo ngược hoàn toàn lên tấm bên dưới, tấm bên dưới không được hiển thị

---

        
        
        
    
    
    
Tài liệu học Lập Trình Web
    

Xem ví dụ

3. 2) Hình nền kết hợp với màu nền

- Nếu bạn thiết lập hình nền cho phần tử bằng loại hình ảnh có một số vị trí trong suốt, thì khi đó bạn có thể sử dụng kết hợp với thuộc tính màu nền để thêm màu nền vào những vị trí trong suốt, làm

---

        
        
        
    
    
    
Tài liệu hướng dẫn học Lập Trình Web
    

Xem ví dụ

4) Giới thiệu sơ lược về "sự lặp lại của hình nền"

- Mặc định, hình nền sẽ xuất phát từ vị trí góc "phía trên - bên trái" của phần tử

- Nếu hình ảnh được sử dụng để làm hình nền cho phần tử có kích thước nhỏ hơn kích thước của phần tử thì hình nền sẽ tự động được lặp lại để lấp đầy diện tích của phần tử (Xem ví dụ)

- Chúng ta có thể thiết lập lặp lại của hình nền (lặp lại, không lặp lại, chỉ lặp theo chiều ngang, chỉ lặp theo chiều dọc,. ) bằng cách sử dụng thuộc tính lặp lại nền trong CSS

Hình nền là gì. ?

- Hình nền là hình nằm bên dưới phần tử (dùng để làm hình nền cho phần tử)

- Các nội dung của phần tử sẽ hiển thị trên 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 nền-hình ảnh cho phần tử đó với cú pháp như sau

background-image: value;

- Trong đó, giá trị có thể được xác định dựa trên một trong các loại giá trị

không ai

- Không thiết lập hình nền cho phần tử

View ví dụurl()

- Chỉ định một tệp hình ảnh được sử dụng làm hình nền cho phần tử

(đường dẫn đến tệp hình ảnh phải được đặt bên trong dấu ngoặc kép)

Xem ví dụ ban đầu

- Use default value of it

(default thì thuộc tính background-image has value is none)

Xem ví dụinherit

- Kế thừa giá trị thuộc tính background-image từ phần tử 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ợp nhất nhiều tệp 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 phần tử chỉ thích hợp khi các tấm hình đó có định dạng là GIF hoặc PNG (loại hình ảnh có một số vị trí trong suốt). Nếu sử dụng loại hình không có phần trong suốt thì nó sẽ là "đè hoàn toà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 cho hình nền

- Trong các bài học trước thì tôi đã giới thiệu sơ lược qua các bạn về cấu trúc của một phần tử HTML rồi, nó bao gồm bốn thành phần chính. lề đường viền phần đệm nội dung

- 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 thiết lập hình nền sẽ bắt đầu từ phần viền cho đến hết phần nội dung

- 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 thiết lập nền của phần tử

background-clip: value;

- Trong đó, giá trị có thể được xác định dựa trên một trong các giá trị sau đây

hộp viền

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

• biên giới
• đệm
• Nội dung

Xem ví dụpadding-box

- Phạm vi được thiết lập hình nền sẽ bao gồm hai phần

• đệm
• Nội dung

hộp nội dung

- Phạm vi được thiết lập hình nền chỉ bao gồm phần. Nội dung

ban đầu

- Use default value of it

(default thì thuộc tính background-clip có giá trị là border-box)

thừa kế

- Kế thừa giá trị thuộc tính background-clip từ phần tử cha của nó

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

- Khi chúng ta thiết lập hình nền cho một phần tử, nếu tấm hình được sử dụng làm hình nền có kích thước nhỏ hơn kích thước của phần tử thì mặc định tấm hình sẽ "tự động lặp lại" để đầy đủ phần tử

- 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 (không giới 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 đó, giá trị có thể được xác định dựa trên một trong sáu loại giá trị

nói lại

- Rounding vertical vertical theo chiều ngang và chiều dọc.

Xem ví dụrepeat-x

- Sheet shape only repeat on the vertical direction

lặp lại-y

- Image sheet only repeat to vertical vertical

không lặp lại

- Plate does not repeat

ban đầu

- Use default value of it

(default thì thuộc tính background-repeat có giá trị là lặp lại)

thừa kế

- Kế thừa giá trị thuộc tính background-repeat từ phần tử cha của nó

4) Thay đổi "vị trí gốc" trong thiết lập nền

- Vị trí gốc là vị trí xuất hiện của tấm hình gốc (tấm hình gốc là tấm hình được sử dụng làm tâm điểm trong công việc

- Mặc định thì vị trí gốc sẽ nằm ngay góc phía bên trái của phần đệm, tuy nhiên chúng ta có thể thay thế .

background-origin: value;

- Trong đó, giá trị có thể được xác định dựa trên một trong năm loại giá trị

hộp viền

- Vị trí gốc sẽ nằm ở góc trên bên trái của phần viền

Xem ví dụpadding-box

- Vị trí gốc sẽ nằm ở phía trên bên trái của phần đệm

hộp nội dung

- Vị trí gốc sẽ nằm ở phía trên bên trái của phần nội dung

ban đầu

- Use default value of it

(default thì background-origin có giá trị là padding-box)

thừa kế

- Kế thừa giá trị thuộc tính background-origin từ phần tử 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, chúng ta cần phải sử dụng thuộc tính nền-vị trí với cú pháp như sau

background-position: value;

- Trong đó, giá trị có thể được xác định dựa trên các 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ó có thể được xác định dựa trên một trong các loại .

Location name

trái giữa phải

N px.

Hình nền nằm cách vị trí gốc một khoảng N pixel.

N %.

Hình nền nằm cách vị trí gốc một khoảng N %.

- Y là vị trí của hình nền "xét theo chiều dọc", nó có thể được xác định dựa trên một trong các loại .

Location name

trên giữa dưới

N px.

Hình nền nằm cách vị trí gốc một khoảng N pixel.

N %.

Hình nền nằm cách vị trí gốc một khoảng N %.

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

Xem ví dụ ban đầu

- Use default value of it

thừa kế

- Kế thừa giá trị thuộc tính background-position từ phần tử cha của nó

6) Điều 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 sử 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 đó, giá trị có thể được xác định dựa trên các loại giá trị bên dưới

chiều rộng chiều cao

- width là chiều rộng của hình nền, nó có thể được xác định dựa trên một trong các loại giá trị như sau.

Tự động

- Chiều rộng của hình nền sẽ tự động được xác định dựa trên chiều cao của hình nền (với điều kiện là Tỷ lệ chiều rộng/cao của hình nền phải bằng với Tỷ lệ chiều rộng/cao của hình ảnh được sử dụng làm hình nền

N px.

- Hình nền sẽ có chiều rộng là N pixel.

N %.

- Hình nền sẽ có chiều rộng bằng N % chiều rộng của vùng được sử dụng để thiết lập vị trí gốc.

- height là chiều cao của hình nền, nó có thể được xác định dựa trên một trong các loại giá trị như sau.

Tự động

- Chiều cao của hình nền sẽ tự động được xác định dựa trên chiều rộng của hình nền (với điều kiện là Tỷ lệ chiều rộng/cao của hình nền phải bằng với Tỷ lệ chiều rộng/cao của hình ảnh được sử dụng làm hình nền

N px.

- Hình nền sẽ có chiều cao là N pixel.

N %.

- Hình nền sẽ có chiều cao bằng N % chiều cao của vùng được sử dụng để thiết lập vị trí gốc.

- Lưu ý. Đối với loại giá trị chiều cao chiều rộng, nếu chúng ta chỉ xác định một tham số thì tham số đó chính là chiều rộng, tham số chiều cao sẽ mặc định là tự động

View for over

- Hình nền sẽ tự động được phóng to ra hoặc thu nhỏ lại để lấp đầy khu vực được sử dụng để thiết lập vị trí gốc . Tuy nhiên, nếu gặp phải trường hợp Tỷ lệ chiều rộng/cao của phần tử khác với Tỷ lệ chiều rộng/cao của tấm hình được sử dụng làm hình nền, thì sẽ xảy ra tình 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 trọn vẹn (nó sẽ bị cắt xén phía dưới hoặc bên phải)

View of ontain

- Hình nền sẽ tự động phóng to ra hoặc thu nhỏ lại sao cho nó được hiển thị Toàn da (không bị cắt xén) với kích thước lớn nhất có thể có trong . .

Xem ví dụ ban đầu

- Use default value of it

(default thì thuộc tính background-size has value is auto)

thừa kế

- Kế thừa giá trị thuộc tính background-size từ phần tử 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 cách thức hiển thị cơ bản

• Cách 1. Nó sẽ cuốn đi khi người dùng kéo thanh cuộn (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ẽ cuốn đi khi người dùng kéo thanh cuộn, 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

        
        
        
    
    
    
Tài liệu học Lập Trình Web
    

0

- Trong đó, giá trị có thể được xác định dựa trên một trong năm loại giá trị

cuộn

- Hình nền sẽ được cuốn khi người dùng kéo thanh cuộn

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ử đó.

View ví dụlocal

- Hình nền sẽ được cuốn khi người dùng kéo thanh cuộn

Xem ví dụ cố định

- Hình nền sẽ nằm ở một vị trí cố định trên màn hình duyệt

- Lưu ý. Mặc định thì nó sẽ nằm ở 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 nền-vị trí