Hình nền trong html

Nền là thuộc tính quan trọng trong CSS, nó được dùng để tạo nền cho các thẻ mà dễ thấy nhất là nội dung thẻ. Background has twotype. nền và màu nền sử dụng ảnh

Nền màu là cách sử dụng nền phổ biến hơn cả, hầu hết các trang web đều sử dụng nền cho toàn trang là màu đơn sắc nào có xu hướng gần với màu trắng, nền màu cho các phần khác của trang thì đa dạng hơn

Có một số thuộc tính của nền chỉ được hỗ trợ trong CSS3. Còn dưới đây là danh sách các thuộc tính chúng ta sẽ tìm hiểu trong ngày hôm nay

1. body {background-image: url('duong-dan-anh.jpg');}

   0;

2. body {background-image: url('duong-dan-anh.jpg');}

   1;

3. body {background-image: url('duong-dan-anh.jpg');}

   2;

4. body {background-image: url('duong-dan-anh.jpg');}

   3;

5. body {background-image: url('duong-dan-anh.jpg');}

   4;

6. body {background-image: url('duong-dan-anh.jpg');}

   5;

7. body {background-image: url('duong-dan-anh.jpg');}

   6;

8. body {background-image: url('duong-dan-anh.jpg');}

   7;
9. viết tắt trong nền;

---

lục mục

Thuộc tính background-color

Cách sử dụng màu nền khá đơn giản, không giới hạn

________số 8_______

hoặc

h3 {background-color:#2E58FF;}

Còn bây giờ bạn sẽ thấy kết quả khi áp dụng đoạn mã trên thẻ h3

Tôi tạo nền cho thẻ h3 này có màu xanh

Như vậy là bạn đã kết thúc với cách sử dụng màu nền. Còn lại 4 thuộc tính nền khác nhưng tất cả đều liên quan đến sử dụng nền là ảnh

Thường tạo nền ảnh cho bất kỳ mức độ cá tính nào. Các trang thiên về thẩm mỹ hoặc muốn tạo ấn tượng nên sử dụng thuộc tính này. Nếu trang web có lượng truy cập nhiều, sử dụng ảnh nền có kích thước lớn cần phải cân nhắc

---

Thuộc tính background-image

Nếu muốn sử dụng hình nền là ảnh bạn khai báo như sau

body {background-image: url('duong-dan-anh.jpg');}

Theo mặc định nếu ảnh nhỏ hơn nền thì nó sẽ lặp lại (repeat) theo cả hai chiều cho đến khi lấp đầy nền thì thôi

Trong phần khai báo URL, bạn có thể sử dụng địa chỉ ảnh từ trang của bạn hoặc bất kỳ địa chỉ ảnh nào trên mạng.

Giờ tôi sẽ tiến hành tạo ảnh nền cho thẻ div, cái thứ nhất là ảnh bằng với nền, cái thứ hai thì ảnh nhỏ hơn nền

Ảnh to bằng nền

Kết quả

Ảnh đến bằng hình nền

---

Ảnh nền nhỏ, mẫu mã

Ảnh nhỏ hơn nền nên nó được lặp lại để bao phủ hết nền

Kết quả

Ảnh nhỏ hơn nền nên nó được lặp lại để bao phủ hết nền

---

Thuộc tính lặp lại nền

Cái này chuyên dùng cho những ảnh nhỏ hơn nền, như ví dụ trên bạn đã thấy, khi ảnh nhỏ hơn nền thì theo mặc định nó sẽ lặp lại để lấp đầy khoảng không của nền thì mới thôi, bạn có quyền chỉ định cách thiết lập

• If only allow it over the width, write.

  body {background-image: url('duong-dan-anh.jpg');}

  8
• If only allow it off the vertical vertical, write.

  body {background-image: url('duong-dan-anh.jpg');}

  9
• Nếu bạn không muốn ảnh nền, hãy lặp lại cho dù nó có nhỏ hơn nền thì hãy viết.

  Ảnh to bằng nền

  0

Ví dụ chỉ lặp lại theo chiều ngang (tôi thêm viền của hộp để bạn dễ nhìn)

---

mẫu mã

---

Ví dụ chỉ lặp lại theo chiều dọc (tôi thêm viền của hộp để bạn dễ nhìn)

---

mẫu mã

Bạn có thể thấy một phần không gian của nền chưa được đầy đủ do ảnh nền chỉ được bật theo 1 chiều

lặp lại ảnh theo chiều nào (hoặc cả 2 chiều) rất hay sử dụng trong trường hợp bạn muốn tiết kiệm dung lượng tải về, đặc biệt là đối với các văn bản họa tiết có tính lặp lại hoặc nền có kích thước không biết trước. Thay vì sử dụng ảnh lớn đến 200 – 500KB, bạn có thể chỉ sử dụng ảnh ở mức 5 – 10KB và lặp lại nó để tạo hình nền ấn tượng

---

Thuộc tính background-attachment

Đây là thuộc tính giúp xác định vị trí tương đối của nội dung so với ảnh nền. Theo mặc định, giá trị này là 

Ảnh to bằng nền

1, nghĩa là ảnh sẽ yên vị làm nền

Trường hợp bạn để 

Ảnh to bằng nền

2 thì ảnh nền sẽ chuyển theo nội dung (

Ảnh to bằng nền

3). Để sử dụng thuộc tính background-attachment bạn phải để 

Ảnh to bằng nền

0

Nếu nội dung bài viết dài thì thông thường ảnh sẽ không đủ độ lớn bao trùm nền web cả trang, khi đó bạn nên sử dụng giá trị 

Ảnh to bằng nền

2

Xem ví dụ bạn sẽ thấy dễ hiểu hơn, di chuyển thanh cuộn dọc để thấy sự khác biệt

background-attachment theo mặc định

---

background-attachment theo mặc định

---

background-attachment has fixed value

---

background-attachment có giá trị fixed

---

Thuộc tính background-position

Bạn sử dụng thuộc tính này để xác định vị trí của ảnh so với nền, chỉ sử dụng đa số trong trường hợp ảnh nhỏ hơn nền, về từ khóa có 8 giá trị cho bạn lựa chọn

• Ảnh to bằng nền

  6. góc nghiêng bên trái trên;

• Ảnh to bằng nền

  7. side left left between;

• Ảnh to bằng nền

  8. góc nghiêng bên trái phía dưới;

• Ảnh to bằng nền

  9. side side right on;

• Ảnh nhỏ hơn nền nên nó được lặp lại để bao phủ hết nền

  0. side must be between;

• Ảnh nhỏ hơn nền nên nó được lặp lại để bao phủ hết nền

  1. side side right side bottom;

• Ảnh nhỏ hơn nền nên nó được lặp lại để bao phủ hết nền

  2. side on main between;

• Ảnh nhỏ hơn nền nên nó được lặp lại để bao phủ hết nền

  3. ngay tại trung tâm;

• Ảnh nhỏ hơn nền nên nó được lặp lại để bao phủ hết nền

  4. bên dưới chính giữa;

Ngoài ra là sử dụng giá trị cụ thể, nó giúp bạn điều chỉnh vị trí của ảnh nền ở bất kỳ đâu mà bạn muốn, ví dụ như

div
{
background-image:url('https://cdn.kiencang.net/wp-content/uploads/2021/02/background-nho.jpg');
background-repeat:no-repeat;
background-position:30px 50px;
}

Kết quả

---

Thuộc tính kích thước nền

Tôi rất ít khi sử dụng thuộc tính này, nhưng điều đó không có nghĩa là chúng ta không bao giờ sử dụng, và sẽ thiếu sót nếu không đề cập đến nó

Trước CSS3, ảnh được làm nền lấy kích thước thực của nó ban đầu, giờ đây với

body {background-image: url('duong-dan-anh.jpg');}

5, bạn quyết định ảnh nền có giá trị cụ thể là bao nhiêu tùy chọn, mã mẫu

h3 {background-color:#2E58FF;}

0

Kết quả

---

Ảnh gốc

---

Thuộc tính background-clip

Đây là thuộc tính mới trong CSS3,

Ảnh nhỏ hơn nền nên nó được lặp lại để bao phủ hết nền

6 quy định mức độ phủ của màu nền (không áp dụng cho nền là ảnh), chúng ta cũng có 3 giá trị

• Ảnh nhỏ hơn nền nên nó được lặp lại để bao phủ hết nền

  7. đây là giá trị mặc định, nghĩa là nền bao phủ đến tận cùng đường viền, thông thường thì cũng như thế rồi, bạn chỉ cần thấy khác biệt ở những giá trị sau…

• Ảnh nhỏ hơn nền nên nó được lặp lại để bao phủ hết nền

  8. nghĩa là nền chỉ bao phủ đến phần đệm mà không bao gồm đường viền

• Ảnh nhỏ hơn nền nên nó được lặp lại để bao phủ hết nền

  9. nghĩa là nền chỉ bao phủ phần nội dung, không bao gồm phần đệm và viền

OK, giờ là lúc đến các ví dụ minh họa cụ thể, nó sẽ giúp chúng ta hiểu rõ hơn

h3 {background-color:#2E58FF;}

1

Kết quả

This is border-box

---

h3 {background-color:#2E58FF;}

2

---

This is paddingbox

---

h3 {background-color:#2E58FF;}

3

And end

This is content-box

---

h3 {background-color:#2E58FF;}

4

Bạn đã thấy sự khác biệt rất rõ nét giữa các ô do các giá trị khác nhau của

Ảnh nhỏ hơn nền nên nó được lặp lại để bao phủ hết nền

6 tạo ra

---

Thuộc tính background-origin

Về cơ bản,

body {background-image: url('duong-dan-anh.jpg');}

7 rất giống

body {background-image: url('duong-dan-anh.jpg');}

6, cũng có các giá trị như thế.

Ảnh nhỏ hơn nền nên nó được lặp lại để bao phủ hết nền

7;

Tuy nhiên 

body {background-image: url('duong-dan-anh.jpg');}

6 là áp dụng cho màu nền, còn

body {background-image: url('duong-dan-anh.jpg');}

7 là áp dụng cho nền ảnh, ngoài ra – điểm khác biệt nữa – giá trị mặc định của

body {background-image: url('duong-dan-anh.jpg');}

7 là

Ảnh nhỏ hơn nền nên nó được lặp lại để bao phủ hết nền

8 chứ không phải

Ảnh nhỏ hơn nền nên nó được lặp lại để bao phủ hết nền

7. Các ví dụ

mẫu mã

h3 {background-color:#2E58FF;}

5

Kết quả

Bạn đã thấy ảnh làm nền ngay cả cho khung của hộp chưa?

---

h3 {background-color:#2E58FF;}

6

---

hộp đệm

Ảnh không làm nền cho viền nữa, đây là cách mà bạn hay thấy nhất, nó cũng là giá trị mặc định của background-origin, là padding-box

---

h3 {background-color:#2E58FF;}

7

---

hộp nội dung

Cuối cùng, ảnh không nằm ở đường viền, cũng không nằm ở phần đệm mà chỉ làm nền cho nội dung của hộp. Vâng, đây là giá trị cuối cùng của background-origin, là content-box

---

h3 {background-color:#2E58FF;}

8

---

Viết tắt khi sử dụng Nền

Để mã dòng được rút ngắn hơn, thay vì xác định rõ tất cả các thuộc tính và giá trị trên từng dòng, chúng ta có thể khai báo thuộc tính duy nhất rồi khai báo đồng thời các giá trị khác đi kèm

Khai báo tắt cho tất cả các thuộc tính của nền, bạn đơn giản sử dụng từ khóa nền thôi

mẫu mã

h3 {background-color:#2E58FF;}

9

Vì thế là thay vì phải viết

body {background-image: url('duong-dan-anh.jpg');}

0,

body {background-image: url('duong-dan-anh.jpg');}

1,

body {background-image: url('duong-dan-anh.jpg');}

2,

body {background-image: url('duong-dan-anh.jpg');}

3, bạn chỉ phải viết duy nhất một dòng