Simple CSS Bài 3: Background

Dựa trên bài của Pearl tại phpcodevn.com

Trong bài học này chúng  ta sẽ được học về cách định màu nền/ảnh nền cho một trang web cũng như các kỹ thuật định vị, điều chỉnh ảnh nền.

3.1.  Màu nền (thuộc tính background-color)

Thuộc  tính  background-color  giúp  định màu  nền  cho một  thành  phần  trên trang web. Các giá trị mã màu của background-color cũng giống như color nhưng
có thêm giá trị transparent để tạo nền trong suốt. Ví dụ sau đây sẽ chỉ cho chúng ta biết cách sử dụng thuộc tính background-color để định màu nền cho cả trang web, các thành phần h1, h2  lần lượt là xanh lơ, đỏ và cam.

01 body {
02 background-color:cyan
03 }
04   
05 h1 {
06 background-color:red
07 }
08 h2 {
09 background-color:orange
10 }

3.2.  Ảnh nền (thuộc tính background-image)

Việc  sử dụng ảnh nền giúp  trang web  trông sinh động và bắt mắt hơn. Để chèn  ảnh  nền  vào một  thành  phần  trên  trang web  chúng  ta  sử  dụng  thuộc  tính
background-image. Bây giờ chúng ta sẽ cùng làm một ví dụ minh họa để xem thuộc tính background-image sẽ hoạt động ra sao. Đầu tiên hãy tìm một tấm ảnh mà bạn thích, ở đây chúng ta sẽ lấy tấm ảnh logo.png. Sau đó, chúng  ta sẽ viết CSS để đặt  logo này  làm ảnh nền trang web như sau:

01 body {
02 background-image:url(logo.png)
03 }
04 h1 {
05 background-color:red
06 }
07 h2 {
08 background-color:orange
09 }
10 p {
11 background-color: #FDC689
12 }

Như các bạn đã thấy chúng ta sẽ phải chỉ định đường dẫn của ảnh trong cặp ngoặc đơn sau url. Do ảnh đặt trong cùng thư mục với file style3.css nên chúng ta chỉ cần ghi  abc.jpg. Nhưng  nếu  chúng  ta  tạo  thêm một  thư mục  img  trong  thư mục  thì chúng  ta  sẽ  phải  ghi  là  background-image:url(img/abc.jpg).  Đôi  khi  nếu  không chắc lắm bạn có thể dùng đường dẫn tuyệt đối cho ảnh.

3.3.  Lặp lại ảnh nền (thuộc tính background-repeat):

Nếu sử dụng một ảnh có kích thước quá nhỏ để làm nền cho một đối tượng lớn hơn thì theo mặc định trình duyệt sẽ lặp lại ảnh nền để phủ kín không gian còn
thừa. Thuộc  tính  background-repeat  cung  cấp  cho  chúng  ta  các  điều  khiển  giúp kiểm soát trình trạng lặp lại của ảnh nền. Thuộc tính này có 4 giá trị:

+ repeat-x: Chỉ lặp lại ảnh theo phương ngang.
+ repeat-y: Chỉ lặp lại ảnh theo phương dọc.
+ repeat: Lặp lại ảnh theo cả 2 phương, đây là giá trị mặc định.
+ no-repeat: Không lặp lại ảnh.

Bây giờ, chúng  ta hãy  thêm  thuộc  tính background-repeat này vào ví dụ  trên  thử xem sao.

1 body {
2 background-image:url(logo.png);
3 background-repeat:no-repeat;
4 }

Các bạn xem, có phải ảnh nền đã không bị  lặp  lại như  trong ví dụ trước, hãy  thử thay đổi qua lại giữa các giá trị và xem kết quả tạo ra.

3.4.  Khóa ảnh nền (thuộc tính background-attachment)

Background-attachment  là một thuộc tính cho phép bạn xác định tính cố định của ảnh nền so với với nội dung trang web. Thuộc tính này có 2 giá trị:
+ scroll: Ảnh nền sẽ cuộn cùng nội dung trang web, đây là giá trị mặc định.
+ fixed: Cố định ảnh nền so với nội dung trang web. Khi áp dụng giá trị này, ảnh nền sẽ đứng yên khi bạn đang cuộn trang web.

3.5. Định vị ảnh nền (thuộc tính background-position)

Theo mặc định ảnh nền khi được chèn sẽ nằm ở góc trên, bên trái màn hình. Tuy nhiên với thuộc tính background-position bạn sẽ có thể đặt ảnh nền ở bất cứ vị
trí nào (trong không gian của thành phần mà nó làm nền). Background-position sẽ dùng một cặp 2 giá trị để biểu diễn tọa độ đặt ảnh nền. Có khá  nhiều  kiểu  giá  trị  cho  thuộc  tính  position.  Như  đơn  vị  chính  xác  như centimeters, pixels, inches,… hay các đơn vị qui đổi như %, hoặc các vị trí đặt biệt như top, bottom, left, right.

Ví dụ:

Giá trị Ý nghĩa
background-position: 5cm 2cm Ảnh được định vị tại 5cm từ trái qua, 2 cm từ trên xuống
background-position: 20% 30% Ảnh được định vị tại 20% từ trái qua, 30% cm từ trên xuống
background-position: bottom left Ảnh được định vị ở góc trái phía dưới

Thuộc tính background rút gọn

Khi sử dụng quá nhiều  thuộc  tính CSS sẽ gây khó khăn cho người đọc, công  tác chỉnh sửa cũng như tốn nhiều dung lượng ổ cứng cho nên CSS đưa ra một cấu trúc
rút gọn cho các thuộc tính cùng nhóm.

Ví dụ: Chúng ta có thể nhóm lại đoạn CSS sau

1 background-color:transparent;
2 background-image: url(logo.png);
3 background-repeat: no-repeat;
4 background-attachment: fixed;
5 background-position: right bottom;

thành một dòng ngắn gọn:

1 background:transparent url(logo.png) no-repeat fixed right bottom;

Từ ví dụ trên chúng ta có thể khái quát cấu trúc rút gọn cho nhóm background:
background:<background-color>  |  <background-image>  |  <background-repeat>  | <background-attachment> | <background-position>
Theo mặc định thì các thuộc tính không được đề cập sẽ nhận các giá trị mặc định.

Ví dụ: Chúng  ta sẽ bỏ qua hai  thuộc  tính background-attachment và background-position ở dòng mã trên đi:

1 background:transparent url(logo.png) no-repeat;

Hai thuộc tính không được chỉ định sẽ đơn thuần được thiết lập tới giá trị mặc định mà chúng ta điều biết là scroll và top left.

Gửi phản hồi

Mời bạn điền thông tin vào ô dưới đây hoặc kích vào một biểu tượng để đăng nhập:

WordPress.com Logo

Bạn đang bình luận bằng tài khoản WordPress.com Log Out / Thay đổi )

Twitter picture

Bạn đang bình luận bằng tài khoản Twitter Log Out / Thay đổi )

Facebook photo

Bạn đang bình luận bằng tài khoản Facebook Log Out / Thay đổi )

Google+ photo

Bạn đang bình luận bằng tài khoản Google+ Log Out / Thay đổi )

Connecting to %s

%d bloggers like this: