Thuộc tính background trong CSS

Trong bài học CSS trước bạn đọc đã cùng Taimienphi.vn tìm hiểu cú pháp và Selector trong CSS, trong bài học tiếp theo dưới đây Taimienphi.vn sẽ giới thiệu tiếp cho bạn thuộc tính background trong CSS nhé.

Các thuộc tính background trong CSS được sử dụng để xác định các hiệu ứng background cho các phần tử.

Thuoc tinh background trong CSS

Thuộc tính background trong CSS

Các thuộc tính background trong CSS bao gồm:

- Thuộc tính background-color.
- Thuộc tính background-image.
- Thuộc tính background-repeat.
- Thuộc tính background-attachment.
- Thuộc tính background-position.

Thuộc tính background trong CSS

1. Thuộc tính Background Color trong CSS

Thuộc tính background-color trong CSS được sử dụng để chỉ định màu nền (background) cho một phần tử.

thuoc tinh background trong css

Kết quả đầu ra có dạng như dưới đây:

thuoc tinh background trong css 2

Trong CSS, màu thường được chỉ định bởi:

- Tên màu hợp lệ, chẳng hạn như "Red".

- Giá trị HEX như "#ff0000".

- Giá trị RGB như "rgb(255,0,0)".

Bạn đọc có thể tham khảo thêm bài viết màu trong CSS trên Taimienphi.vn để tìm hiểu danh sách các giá trị màu hợp lệ.

Ví dụ 2:

thuoc tinh background trong css 3

Kết quả đầu ra có dạng như dưới đây:

thuoc tinh background trong css 4

2. Thuộc tính Background Image trong CSS

Thuộc tính background-image trong CSS chỉ định hình ảnh được sử dụng làm nền background của phần tử.

Mặc định hình nền được lặp lại để phủ toàn bộ phần tử.

Ví dụ 1:

thuoc tinh background trong css 5

Kết quả đầu ra có dạng như dưới đây:

thuoc tinh background trong css 6

Ví dụ 2:

Ví dụ dưới đây minh họa cách sử dụng kết hợp text và hình nền sai cách:

thuoc tinh background trong css 7

Kết quả đầu ra có dạng như dưới đây:

thuoc tinh background trong css 8

Như bạn có thể thấy trong đầu ra ở trên, đoạn text hiển thị trên hình nền rất khó đọc.

Lưu ý: Khi sử dụng hình nền, tốt nhất bạn không nên lựa chọn và sử dụng các hình nền làm rối mắt.

3. Lặp lại hình nền theo chiều ngang hoặc chiều dọc trong CSS

Theo mặc định thuộc tính background-image lặp đi lặp lại hình nền theo chiều ngang hoặc chiều dọc.

Ví dụ 1:

Trong ví dụ dưới đây hình nền được lặp lại theo cả chiều ngang và chiều dọc nên trông khá lạ:

thuoc tinh background trong css 9

Kết quả đầu ra có dạng như dưới đây:

thuoc tinh background trong css 10

Ví dụ 2:

Trong ví dụ dưới đây hình nền chỉ được lặp lại theo chiều ngang (background-repeat: repeat-x;):

thuoc tinh background trong css 11

Kết quả đầu ra có dạng như dưới đây:

thuoc tinh background trong css 12

Lưu ý: Để lặp lại hình nền theo chiều dọc, chúng ta thiết lập: background-repeat: repeat-y;

4. Thiết lập vị trí hình nền trong CSS

Thuộc tính background-repeat chỉ hiển thị hình nền 1 lần, không lặp lại.

Ví dụ 1:

thuoc tinh background trong css 13

Kết quả đầu ra có dạng như dưới đây:

thuoc tinh background trong css 14

Trong ví dụ trên, hình nền được hiển thị cùng một vị trí với text nên trông khá rối mắt. Tuy nhiên chúng ta có thể thay đổi vị trí hình nền để không ảnh hưởng đến phần text.

Để chỉ định vị trí hình nền, chúng ta sử dụng thuộc tính background-position.

Ví dụ 2:

thuoc tinh background trong css 15

Kết quả đầu ra có dạng như dưới đây:

thuoc tinh background trong css 16

5. Thiết lập vị trí hình nền cố định

Để thiết lập vị trí hình nền cố định, không scroll được, chúng ta sử dụng thuộc tính background-attachment.

Ví dụ:

thuoc tinh background trong css 17

Kết quả đầu ra có dạng như dưới đây:

thuoc tinh background trong css 18

6. Rút gọn thuộc tính Background

Để rút gọn mã, chúng ta có thể chỉ định tất cả các thuộc tính background trong một thuộc tính duy nhất. Phương pháp này còn được gọi là rút gọn thuộc tính (shorthand property).

Rút gọn thuộc tính của background là background.

Ví dụ:

thuoc tinh background trong css 19

Kết quả đầu ra có dạng như dưới đây:

thuoc tinh background trong css 20

Khi sử dụng rút gọn thuộc tính, thứ tự các giá trị thuộc tính sẽ là:

background-color

background-image

background-repeat

background-attachment

background-position

7. Các thuộc tính Background trong CSS

Trong bảng dưới đây, Taimienphi.vn liệt kê danh sách tất cả các thuộc tính Background trong CSS:

thuoc tinh background trong css 21

Thuộc tính Mô tả

background Thiết lập tất cả các thuộc tính background trong một khai báo.
background-attachment Thiết lập hình nền là cố định hay có thể scroll.
background-clip Chỉ định vị trí cho hình nền.
background-color Thiết lập màu nền cho các phần tử.
background-image Thiết lập hình nền cho các phần tử.
background-origin Chỉ định các vị trí hình nền là cố định.
background-position Thiết lập vị trí bắt đầu của hình nền.
background-repeat Thiết lập cách lặp lại hình nền.
background-size Chỉ định kích thước hình nền.

https://thuthuat.taimienphi.vn/thuoc-tinh-background-trong-css-48841n.aspx
Như vậy bài học CSS trên đây Taimienphi.vn vừa giới thiệu cho bạn các thuộc tính background trong CSS. Trong bài học tiếp theo Taimienphi.vn sẽ giới thiệu tiếp cho bạn các thuộc tính font trong CSS nhé.

Tác giả: Nguyễn Hải Sơn     (4.0★- 3 đánh giá)  ĐG của bạn?

  

Bài viết liên quan

Namespace trong C# là gì?
Tìm hiểu về Học C#
Cú pháp C# cơ bản
Cài đặt môi trường C
Vòng lặp (loop) trong C#
Từ khoá liên quan:

Thuộc tính background trong CSS

, background trong CSS, học CSS,

SOFT LIÊN QUAN
  • Lập trình C++

    Giáo trình lập trình C++

    Lập trình C++ là tài liệu hướng dẫn học lập trình C++ - ngôn ngữ lập trình hướng đối tượng mở rộng từ ngôn ngữ C, cung cấp đến bạn các kiến thức về cách thức và tư duy lập trình. Đây là tài liệu rất hữu ích cho những ai ...

Tin Mới

  • Tìm hiểu Link trong CSS, cú pháp và ví dụ

    Trong bài học CSS trước Taimienphi.vn đã giới thiệu cho bạn về hình ảnh (image) trong CSS. Trong bài học tiếp theo dưới đây Taimienphi.vn sẽ giới thiệu tiếp cho bạn về link trong CSS.

  • Học thuộc tính cursor trong CSS, có ví dụ

    Trong các bài học CSS trước Taimienphi.vn đã giới thiệu cho bạn về thuộc tính padding trong CSS. Bài học tiếp theo dưới đây Taimienphi.vn sẽ giới thiệu tiếp cho bạn về thuộc tính cursor trong CSS.

  • Thuộc tính border trong CSS, cú pháp và ví dụ minh họa

    Trong bài học CSS trước Taimienphi.vn đã giới thiệu cho bạn về các thuộc tính định dạng bảng trong CSS. Trong bài viết tiếp theo dưới đây Taimienphi.vn sẽ giới thiệu tiếp cho bạn về thuộc tính border trong CSS.

  • Danh sách mã Code Rồng Thần Online mới nhất 2023

    Ngay sau khi đăng nhập Rồng Thần Online và cày sức mạnh đến 50 điểm năng động, game thủ có thể đổi Code Rồng Thần Online mới nhất nhận đậu thần cấp 10, đá cấp 8 và cải trang cực kỳ xịn sò. Mỗi mã Code Rồng Thần Online có giá trị và số lượng vật phẩm đính kèm riêng, chính vì thế bạn nên nhập hết để không bỏ lỡ bất kỳ món quà miễn phí từ NPH.