HTML/CSS • News

[W3schools Tiếng Việt] – CSS Backgrounds

08/12/2018
Thêm bình luận
1.005 Lượt xem
Viết bởi Tiến Đức
Phần 5 của 9 trong series [W3schools Tiếng Việt] - CSS

Thuộc tính background dùng để định dạng nền cho phần tử HTML.

Dưới đây là một số thuộc tính background:

  • background-color (thiết lập màu nền)
  • background-image (thiết lập hình nền)
  • background-repeat (thiết lập sự lặp lại của hình nền)
  • background-attachment (thiết lập vị trí cố định cho hình nền)
  • background-position (thiết lập vị trí của hình nền)

Background Color – Mầu nền

Thuộc tính background-color chỉ định màu nền của phần tử.

Màu nền của một trang được đặt như sau:

Ví dụ
CSS
0
1
2
body {
    background-color: lightblue;
}

See the Pen background by nguyen tien (@nguyentien365) on CodePen.

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

  • Tên màu/giá trị HEX/giá trị RGB hợp lệ – như “red”, “#ff0000” hoặc “rgb(255,0,0)”.

Xem các giá trị màu CSS để biết danh sách đầy đủ các giá trị màu có thể có.

Trong ví dụ bên dưới, các phần tử <h1>, <p> và <div> có các màu nền khác nhau:

CSS
0
1
2
3
4
5
6
7
8
9
10
h1 {
    background-color: green;
}
 
div {
    background-color: lightblue;
}
 
p {
    background-color: yellow;
}

See the Pen backgroun color by nguyen tien (@nguyentien365) on CodePen.

Background Image – Hình nền

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

Theo mặc định, hình ảnh được lặp lại để nó bao gồm toàn bộ phần tử.

Hình nền cho một trang có thể được đặt như sau:

CSS
0
1
2
body {
    background-image: url("paper.gif");
}

url(“paper.gif”): link hình bạn muốn đặt;

Lưu ý: Khi sử dụng hình nền, hãy sử dụng hình ảnh có mầu sắc tương phản với mầu chữ.

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

(Repeat Horizontally or Vertically)

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

*Mẹo:

Để lặp lại hình ảnh theo chiều dọc, ta sử dụng: background-repeat: repeat-y;

Để lặp lại hình ảnh theo chiều dọc, ta sử dụng: background-repeat: repeat-x;

CSS
0
1
2
3
body {
  background-image: url("gradient_bg.png");
  background-repeat: repeat-x;
}

Hình nền – đặt cố định không lặp lại

(Set position and no-repeat)

Chỉ hiển thị hình nền một lần không lặp lại, ta sử dụng: background-repeat no-repeat;

CSS
0
1
2
3
body {
  background-image: url("img_tree.png");
  background-repeat: no-repeat;
}

 

Xem ví dụ

Trong ví dụ trên, hình nền được hiển thị ở cùng một nơi với văn bản. Nếu bạn muốn thay đổi vị trí của hình ảnh, để nó không làm ảnh hưởng tới văn bản quá nhiều, bạn sử dụng background-position

CSS
0
1
2
3
4
body {
  background-image: url("img_tree.png");
  background-repeat: no-repeat;
  background-position: right top;
}

Giá trị của  background-position  bạn có thể set nhiều vị trí khác nhau: center, right, left, …..

Xem ví dụ

Background Image – Fixed position

Thuộc tính này sẽ đặt cố định hình ảnh nền và sẽ không cuộn với phần còn lại của trang. Sử dụng thuộc tính: background-attachment

CSS
0
1
2
3
4
5
body {
  background-image: url("img_tree.png");
  background-repeat: no-repeat;
  background-position: right top;
  background-attachment: fixed;
}

See the Pen The background-image is fixed. by nguyen tien (@nguyentien365) on CodePen.

Background – Shorthand property

Để rút ngắn mã, cũng có thể chỉ định tất cả các thuộc tính nền trong một thuộc tính duy nhất. Đây được gọi là một Shorthand property – Tốc ký.

Hiểu đơn giản là ta nhóm chúng lại và mỗi thuộc tính cách nhau bởi khoảng trắng, vậy thôi :))

CSS
0
1
2
body {
  background: #ffffff url("img_tree.png") no-repeat right top;
}

Khi sử dụng thuộc tính Shorthand property (tốc ký), thứ tự của các giá trị thuộc tính là:

  • background-color
  • background-image
  • background-repeat
  • background-attachment
  • background-position

Thuộc tính trong sử dụng tốc ký có thể thiếu, nhưng phải đảm bảo đúng thứ tự.

Tất cả thuộc tính của Background trong CSS

Thuộc tính Mô tả
background Đặt tất cả các thuộc tính nền trong một khai báo
background-attachment Đặt xem hình nền có cố định hay cuộn với phần còn lại của trang
background-clip Chỉ định vùng vẽ của nền
background-color Đặt mầu nền cho một vùng chọn
background-image Đặt ảnh nền cho một vùng chọn
background-origin Chỉ định vị trí của (các) hình nền
background-position Đặt vị trí bắt đầu của ảnh nền
background-repeat Điều chỉnh dạng hiển thị của hình nền (lặp lại hoặc không, các chiều lặp)
background-size Chỉ định kích thước của hình nền

 

Xem thêm bài trong series<< [W3schools Tiếng Việt] – CSS Colors | Mầu sắc trong CSS[W3schools Tiếng Việt] – CSS Borders | Đường viền >>
Sending
User Review
0 (0 votes)

Có thể bạn thích

Về tác giả

Tiến Đức

Xem tất cả bài viết

Gửi phản hồi