• slider CÔNG TY CỔ PHẦN KỸ THUẬT ĐIỆN XUÂN THÀNH
  • slider " CHẤT LƯỢNG CÔNG TRÌNH, DỊCH VỤ HẬU MÃI "

Tin tức

Kiến thức về CSS (P3): Các thuộc tính background trong CSS.

( 26-09-2017 - 05:32 PM ) - Lượt xem: 1128

Bạn đang xem bài viết Kiến thức về CSS (P3): Các thuộc tính background trong CSS.. Một vài liên kết tham khảo: thiết kế web du lịch thiết kế web thời trang

Kiến thức về CSS (P3): Các thuộc tính background trong CSS.

Bạn đang xem bài viết Kiến thức về CSS (P3): Các thuộc tính background trong CSS.. Một vài liên kết tham khảo: thiết kế web du lịch thiết kế web thời trang

Mỗi ngôn ngữ trong thiết kế web hay lập trình web đều có những thuộc tính để sử dụng, trong bài viết này mình chia sẻ với các bạn các thuộc tính background trong CSS. Các bạn cùng theo dõi nhé.

Để xác định các hiệu ứng liên quan tới background cho các phần tử trong HTML, bạn có thể sử dụng các thuộc tính background trong CSS.

  • Thuộc tính background-color: thuộc tính này được sử dụng để thiết lập màu nền của một phần tử.
  • Thuộc tính background-image: thuộc tính này được sử dụng để thiết lập hình nền cho một phần tử.
  • Thuộc tính background-repeat: thuộc tính này được sử dụng để điều khiển sự lặp đi lặp lại của một hình ảnh nền theo chiều dọc hoặc chiều ngang.
  • Thuộc tính background-position: thuộc tính này được sử dụng để điều khiển vị trí của một hình ảnh nền.
  • Thuộc tính background-attachment: thuộc tính này được sử dụng để xác định xem có hay không một hình nền là cố định hoặc có thể scroll với phần còn lại của trang.
  • Thuộc tính background: sử dụng thuộc tính này nếu bạn muốn viết ít code hơn mà vẫn xác định được tất cả các thuộc tính liên quan tới background ở trên cho hình nền.

Bảng dưới đây sẽ tóm tắt lại cho bạn có thể dễ nắm bắt hơn về các thuộc tính background trong CSS.

X

  • 1 Ví dụ cụ thể cho mỗi thuộc tính
    • 1.1 Thuộc tính background-color (Thiết lập màu nền trong CSS)
    • 1.2 Thuộc tính background-image (Thiết lập hình nền trong CSS)
    • 1.3 Thuộc tính background-repeat (Lặp lại hình nền trong CSS)
    • 1.4 Thuộc tính background-position (Thiết lập vị trí hình nền trong CSS)
    • 1.5 Thuộc tính background-attachment (Thiết lập vị trí hình nền trong CSS)
    • 1.6 Thuộc tính background
      • 1.6.1 Người viết đánh giá

Ví dụ cụ thể cho mỗi thuộc tính

Thuộc tính background-color (Thiết lập màu nền trong CSS)

Để thiết lập màu nền trong CSS, bạn sử dụng thuộc tính background-color. Ví dụ sau minh họa cách thiết lập màu nền cho một phần tử trong CSS.

Bạn có thể sử dụng tên màu, giá trị Hex Code, giá trị Short Hex Code hoặc thuộc tính rgb().

X1

Thuộc tính background-image (Thiết lập hình nền trong CSS)

Để thiết lập màu nền trong CSS, bạn sử dụng thuộc tính background-image.

Giá trị url ở đây xác định đường dẫn đến nơi bạn lưu giữ hình ảnh.

X2

Thuộc tính background-repeat (Lặp lại hình nền trong CSS)

Nếu bạn muốn hình nền của mình lặp đi lặp lại theo chiều ngang hoặc theo chiều dọc, bạn có thể sử dụng thuộc tính background-repeat trong CSS. Thuộc tính này có các giá trị:

  • repeat: Giá trị mặc định. Hình nền sẽ được lặp đi lặp lại theo cả chiều dọc lẫn chiều ngang.
  • repeat-x: Hình nền sẽ chỉ được lặp đi lặp lại theo chiều ngang.
  • repeat-y: Hình nền sẽ chỉ được lặp đi lặp lại theo chiều dọc.
  • no-repeat: Hình nền sẽ không được lặp đi lặp lại.

Theo mặc định, thuộc tính background-repeat sẽ có giá trị repeat.

X3

Cách lặp hình nền theo chiều dọc bởi sử dụng giá trị repeat-y của thuộc tính background-color:

X4

Cách lặp hình nền theo chiều ngang bởi sử dụng giá trị repeat-x của thuộc tính background-color:

X5

Thuộc tính background-position (Thiết lập vị trí hình nền trong CSS)

Để thiết lập vị trí cho hình nền, bạn sử dụng thuộc tính background-position trong CSS. Đơn vị thường được sử dụng để xác định giá trị cho thuộc tính background-position này là px.

X6

Thuộc tính background-attachment (Thiết lập vị trí hình nền trong CSS)

Nếu bạn muốn thiết lập hình nền là cố định hay là có thể scroll được, bạn sử dụng thuộc tính background-attachment trong CSS.

Thuộc tính này nhận hai giá trị là fixed và scroll tương ứng.

X7

Thuộc tính background

Thuộc tính background : Có giá trị riêng lẻ hoặc tổng hợp các thuộc tính background-color, background-image, background-repeat, background-position, background-attachment.

Cách viết như sau:
background: color image repeat position attachment;
Ví dụ: background: #990000 url(bg_webstd.gif) no-repeat left top fixed;

X8

Xem thêm:

  • Kiến thức về CSS (P1): Giới thiệu về CSS
  • Kiến thức về CSS (P2): Cách viết nội dung, bộ chọn và comment trong CSS

  • Người viết đánh giá

  • Rated 5 stars
  • Tuyệt vời
  • 100%
  •  
  • Reviewed by: Phạm Trang
  • Published on: 09/07/2016
  • Last modified: 09/07/2016
  •  


Nguồn bài viết: Kiến thức về CSS (P3): Các thuộc tính background trong CSS.

Bài viết khác