Đặt html màu nền

Thuộc tính opacity chỉ định độ mờ/độ trong suốt của một phần tử. Nó có thể nhận giá trị từ 0. 0 - 1. 0. Giá trị càng thấp, càng minh bạch

Ghi chú. Khi sử dụng thuộc tính opacity để thêm độ trong suốt cho nền của một phần tử, tất cả các phần tử con của nó sẽ thừa hưởng cùng một độ trong suốt. Điều này có thể làm cho văn bản bên trong một phần tử hoàn toàn trong suốt khó đọc

---

Minh bạch sử dụng RGBA

Nếu bạn không muốn áp dụng độ mờ cho các phần tử con, như trong ví dụ của chúng tôi ở trên, hãy sử dụng các giá trị màu RGBA. Ví dụ sau đặt độ mờ cho màu nền chứ không phải văn bản

Bạn đã học được từ Chương Màu sắc CSS của chúng tôi rằng bạn có thể sử dụng RGB làm giá trị màu. Ngoài RGB, bạn có thể sử dụng giá trị màu RGB với kênh alpha (RGBA) - chỉ định độ mờ cho màu

Giá trị màu RGBA được chỉ định với. rgba (đỏ, lục, lam, alpha). Tham số alpha là một số trong khoảng từ 0. 0 (hoàn toàn trong suốt) và 1. 0 (đục hoàn toàn)

Thuộc tính giá trị Ví dụ mô tả background-attachment fixed
cuộn tệp đính kèm nền. đã sửa;
Được sử dụng kèm theo mã màu background-image background-color
tên màu
rgb background-color value. #ff0000;
màu nền. màu đỏ;
màu nền. rgb(255,0,0); . url hình nền(đường dẫn hình) hình nền. url(ico_arrow. gif); . vị trí nền trái
đúng
đứng đầu
đáy
px
% vị trí nền. trên bên trái;
Được sử dụng kèm theo giá trị nền-hình ảnh. lặp lại nền lặp lại-x
lặp lại-y
nói lại
không lặp lại nền-lặp lại. lặp lại-x; . nền Một hoặc nhiều giá trị của các thuộc tính trên nền. url(ico_arrow. gif) lặp lại-x trên cùng bên trái;

Lưu ý. khi sử dụng hình ảnh làm nền, thì bạn nên sử dụng hình ảnh mà nó không gây ảnh hưởng lên các văn bản. If not image that will over over or doing Mờ chữ hoặc nội dung trang web của bạn

Dưới đây là ví dụ về sự kết hợp không tốt giữa văn bản và nền (hình nền)

Ví dụ 4

cơ thể người {
hình nền. url(“bgdesert. jpg”);
}

---

Hình nền – lặp lại ảnh theo chiều dọc hoặc ngang

Mặc định thì thuộc tính background-image sẽ phù hợp với cả 2 dạng dọc và ngang (ngang và dọc)

Một số ảnh nên được đặt ngang hoặc dọc, nếu không thì trông nó rất xấu, không đẹp mắt, giống như sau

Ví dụ 5

cơ thể người {
hình nền. url(“gradient_bg. png”);
}

If as the image on only was repeat on the width (background-repeat. repeat-x;), thì sẽ trông tốt hơn

Ví dụ 6

cơ thể người {
hình nền. url(“gradient_bg. png”);
Bối cảnh Lặp lại. lặp lại-x;
}

Lưu ý. Để lặp lại một hình ảnh theo chiều dọc (vertical), chúng ta đặt lặp lại nền. lặp lại-y;

---

Hình nền – Vị trí thiết lập và không khớp

Để hiển thị hình nền chỉ một lần cũng được xác định bởi thuộc tính lặp lại nền

Ví dụ 7

cơ thể người {
hình nền. url(“img_tree. png”);
Bối cảnh Lặp lại. không lặp lại;
}

Trong ví dụ trên hình nền hiển thị cùng nơi với văn bản. Chúng ta muốn thay đổi vị trí của hình ảnh, để nó không che khuất văn bản quá nhiều

Vị trí của hình ảnh được xác định với thuộc tính background-position

Ví dụ 8

cơ thể người {
hình nền. url(“img_tree. png”);
Bối cảnh Lặp lại. không lặp lại;
vị trí nền. trên cùng bên phải;
}

---

Hình nền – Cố định vị trí

Để chỉ định hình nền sẽ cố định (tức là nó sẽ không bị mất di chuyển khi cuộn), sử dụng thuộc tính background-attachment

Ví dụ 9

cơ thể người {
hình nền. url(“img_tree. png”);
Bối cảnh Lặp lại. không lặp lại;
vị trí nền. trên cùng bên phải;
tệp đính kèm nền. đã sửa;
}

---

Thuộc tính nền – Viết mã ngắn

Để rút ngắn mã, bạn có thể chỉ định tất cả các thuộc tính nền trên cùng một dòng duy nhất. Nó được gọi là thuộc tính Tốc ký

Ví dụ 10

cơ thể người {
lai lịch. #ffffff url(“img_tree. png”) không lặp lại trên cùng bên phải;
}

Khi sử dụng tốc ký thuộc tính thì thứ tự giá trị thuộc tính sẽ là

• màu nền
• hình nền
• Bối cảnh Lặp lại
• tệp đính kèm nền
• vị trí nền

Nếu nhu cầu của bạn không cần sử dụng hết thuộc tính này trong tốc ký thì không quan trọng, bạn chỉ việc không đưa nó vào miễn phí sao linh hoạt theo thứ tự như trên đã được