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.

http://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

Bloodshed Dev C++ - Hướng dẫn thực thi, biên dịch
Comment trong C++
Con trỏ (pointer) trong C
Lệnh điều kiện trong C
Cách thiết lập môi trường lập trình 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

  • Thuộc tính định dạng bảng trong CSS

    Trong bài học CSS trước bạn đọc đã cùng Taimienphi.vn tìm hiểu về các thuộc tính link 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ề thuộc tính định dạng bảng (table) trong CSS

  • Cách nhúng, chèn CSS vào tài liệu HTML

    Trong bài học CSS trước bạn đọc đã cùng Taimienphi.vn tìm hiểu về 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 một số cách nhúng, chèn CSS vào tài liệu HTML nhé.

  • Học CSS cho người mới

    Có nhiều lý do vì sao chúng ta nên học CSS - ngôn ngữ được sử dụng để tạo kiểu, định dạng và hiển thị những thứ được tạo bởi HTML. Bạn đọc cùng tham khảo tiếp bài viết dưới đây của Taimienphi.vn để tìm hiểu thêm thông tin nhé.

  • Lời bài hát Từng Yêu

    Bài hát Từng Yêu một sáng tác của Nguyễn Đình Dũng được thể hiện bởi Phan Duy Anh. Bài hát nói về câu chuyện tình yêu của chàng trai dành cho cô gái, những ký ức đẹp, những buồn tủi đớn đau, đắng cay, đều được thể hiện rõ trong lời bài hát. Các bạn cùng lắng nghe và theo dõi lời bài hát cụ thể dưới đây nhé.


 Mùa hè tới rồi muốn so sánh giá tìm điều hòa giá rẻ nhất thị trường hãy dùng TopGia để so sanh gia có nhiều mẫu dieu hoa để so sanh sanh, xem dieu hoagiá rẻ để so sánh giá