Để tạo kiểu nền trong CSS người ta dùng một số thuộc tính background như:
+ background-color ( màu nền)
+ background-image ( hình nền)
+ background-repeat ( sự lặp lại của hình nền)
+ background-attachment (cố định vị trí hình nền)
+ background-position ( vị trí của hình nền)
1. Background-color (màu nền)
Thuộc tính background-color dùng để xác định màu nền của các phần tử HTML.
Thẻ <body> chứa tất cả nội dung của tập tin HTML. Do vậy, để thay đổi màu nền của toàn trang HTML, chúng ta sẽ áp dụng thuộc tính background-color cho nó.
Cú pháp: background-color: màu sắc;
Trong đó “màu sắc” có thể xác định theo: tên màu chẳng hạn như red (màu đỏ), giá trị RGB chẳng hạn như rgb(255,0,0) hoặc giá trị HEX chẳng hạn như #ff0000.
Cái này tôi đã viết kỹ ở bài trước nên tôi không viết lại ở đây
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
2. Background-image ( hình nền)
Thuộc tính Background-image chỉ định một hình ảnh để sử dụng làm nền của một 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
Dưới đây là ví dụ về sự kết hợp không tốt của văn bản và hình nền. Văn bản khó có thể đọc được
Lưu ý: Khi sử dụng hình nền, hãy sử dụng một hình ảnh không làm ảnh hưởng đến văn bản.
Qua các ví dụ trên chắc các bạn đã biết được cú pháp của nó rồi.
Cú pháp:
background-image: url(“đường dẫn đến tập tin hình ảnh”);
Trong đó “đường dẫn đến tập tin hình ảnh” có thể là đường dẫn tuyệt đối hoặc tương đối.
Nếu các bạn vẫn chưa rõ về đường dẫn tương đối và tuyệt đối, các bạn nên xem bài viết liên kết đường dẫn tuyệt đối và tương đối trong series Học HTML của tôi.
3. Background-repeat ( sự lặp lại của hình nền)
Theo mặc định, thuộc tính background-image lặp lại hình ảnh theo cả chiều ngang và chiều dọc.
Một số hình ảnh nên được lặp lại chỉ theo chiều ngang hoặc chỉ theo chiều dọc, nếu không nó sẽ nhìn không được đẹp mắt, như hình dưới đây
Nếu hình ảnh ở trên chỉ được lặp lại theo chiều ngang (background-repeat: repeat-x;), nền sẽ trông đẹp hơn như hình dưới đây
Lưu ý: Nếu muốn hình ảnh lặp lại chỉ theo chiều dọc thì dùng background-repeat: repeat-y;
Các bạn cần lưu ý thêm rằng nếu các bạn chỉ muốn hình ảnh hiện ra một lần và không có được lặp lại thì dùng cú pháp sau
background-repeat: no-repeat;
Để các dễ hiểu tôi sẽ ví dụ như hình dưới
4. Background-position (vị trí của hình nền)
Trong ví dụ ở trên, hình nền được hiển thị ở cùng nơi với văn bản. Tôi muốn thay đổi vị trí của hình ảnh, để nó ít làm ảnh hưởng đến văn bản.
Vị trí của hình ảnh được xác định bởi thuộc tính background-position
Lưu ý:
+ Nếu muốn thiết lập Background-position (vị trí của hình nền) thì thuộc tính background-repeat phải nhận giá trị no-repeat
+ Mặc định, một hình nền có vị trí ở góc trái phía trên màn hình (left top)
+ Cú pháp: background-position: giá trị;
5. Cách xác định giá trị của thuộc tính background-position
Có nhiều cách để xác định giá trị của thuộc tính background-position. Nhưng tất cả đều là một cặp đôi giá trị xác định tọa độ của ảnh trên màn hình. Giá trị có thể xác định bằng đơn vị %, px … hoặc dùng các từ mô tả chuẩn như top, bottom, center, left và right.
background-position có các cặp giá trị như sau:
background-position: left top; Hình nằm bên trái – phía trên màn hình (đây là dạng mặc định).
background-position: left bottom; Hình nằm bên trái – phía dưới màn hình
background-position: left center; Hình nằm bên trái – canh giữa màn hình
background-position: right top; Hình nằm bên phải – phía trên màn hình
background-position: right bottom; Hình nằm bên phải – phía dưới màn hình
background-position: right center; Hình nằm bên phải – canh giữa màn hình
background-position: center top; Hình nằm giữa – phía trên màn hình
background-position: center bottom; Hình nằm giữa – phía dưới màn hình
background-position: center center; Hình nằm giữa – canh giữa màn hình
background-position: đơnvị đơnvị; Hình nằm cách bên trái với khoảng cách bằng đơn vị – cách phía trên với khoảng cách bằng đơn vị.
trong đó, đơn vị thường dùng là % hoặc px
Để các bạn dễ hiểu tôi sẽ ví dụ như sau: Giả sử hình ảnh có chiều rộng là 100px và chiều cao là 100px đang hiển thị trên cửa sổ trình duyệt có chiều rộng là 600px và chiều cao là 600px thì ảnh minh họa bên dưới sẽ giúp bạn hình dung ra các giá trị tọa độ tương đương với vị trí nào trên cửa sổ trình duyệt.
Cũng với ví dụ trên tôi sẽ lập ra một bảng background-position có các cặp giá trị mà ảnh có cùng vị trí hiển thị trên một hàng.
| background-position: left top; | background-position: 0% 0%; | background-position: 0px 0px; |
| background-position: left bottom; | background-position: 0% 100%; | background-position: 0px 500px; |
| background-position: left center; | background-position: 0% 50%; | background-position: 0px 250px; |
Lưu ý:
+ Theo phương ngang (phương x) thì 100% sẽ được quy ước theo cú pháp sau:
Chiều rộng màn hình trình duyệt – chiều rộng ảnh
Các bạn cần lưu ý rằng nó sẽ được tính từ mép trái sang phải đụng đến mép của hình ảnh.
+ Theo phương dọc (phương y) thì 100% sẽ được quy ước theo cú pháp sau:
Chiều dài màn hình trình duyệt – chiều dài ảnh
Các bạn cần lưu ý rằng nó sẽ được tính từ mép trên xuống dưới đụng đến mép của hình ảnh.
Cũng với ví dụ trên tôi có background-position: 125px 125px; tôi muốn quy đổi thành % tôi phải làm sao?
Tôi sẽ có biểu thức tính toán sau (125px * 100%) : 500px = 25%
Vậy vị trí hình ảnh tương ứng với % sẽ là background-position: 25% 25%;
Cũng với ví dụ trên tôi có background-position: 75% 75%; tôi muốn quy đổi thành px tôi phải làm sao?
Tôi sẽ có biểu thức tính toán sau (75 * 500px) :100 = 375px
Vậy vị trí hình ảnh tương ứng với px sẽ là background-position: 375px 375px;
6. Background-attachment (cố định vị trí hình nền)
Thuộc tính background-attachment dùng để khai báo cố định vị trí hìnnh nền
Một hình nền được xác định vị trí cố định sẽ không di chuyển theo các đoạn văn bản khi người dùng di chuyển thanh cuộn của trang HTML
Cú pháp: background-attachment: fixed;
Đoạn code dưới đây khai báo vị trí cố định của ảnh, không di chuyển khi người xem di chuyển thanh cuộn.
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url("img_tree.png");
background-repeat: no-repeat;
background-position: right top;
margin-right: 200px;
background-attachment: fixed;
}
</style>
</head>
<body>
<h1>Tiêu đề</h1>
<p>Một hình nền được xác định vị trí cố định sẽ không di chuyển theo các đoạn văn bản khi người dùng di chuyển thanh cuộn của trang HTML </p>
<p>Một hình nền được xác định vị trí cố định sẽ không di chuyển theo các đoạn văn bản khi người dùng di chuyển thanh cuộn của trang HTML </p>
<p>Một hình nền được xác định vị trí cố định sẽ không di chuyển theo các đoạn văn bản khi người dùng di chuyển thanh cuộn của trang HTML </p>
<p>Một hình nền được xác định vị trí cố định sẽ không di chuyển theo các đoạn văn bản khi người dùng di chuyển thanh cuộn của trang HTML </p>
<p>Một hình nền được xác định vị trí cố định sẽ không di chuyển theo các đoạn văn bản khi người dùng di chuyển thanh cuộn của trang HTML </p>
<p>Một hình nền được xác định vị trí cố định sẽ không di chuyển theo các đoạn văn bản khi người dùng di chuyển thanh cuộn của trang HTML </p>
<p>Một hình nền được xác định vị trí cố định sẽ không di chuyển theo các đoạn văn bản khi người dùng di chuyển thanh cuộn của trang HTML </p>
<p>Một hình nền được xác định vị trí cố định sẽ không di chuyển theo các đoạn văn bản khi người dùng di chuyển thanh cuộn của trang HTML </p>
<p>Một hình nền được xác định vị trí cố định sẽ không di chuyển theo các đoạn văn bản khi người dùng di chuyển thanh cuộn của trang HTML </p>
<p>Một hình nền được xác định vị trí cố định sẽ không di chuyển theo các đoạn văn bản khi người dùng di chuyển thanh cuộn của trang HTML </p>
</body>
</html>
Màn hình trình duyệt hiển thị
Như hai hình trên bạn thấy ảnh đã được cố định ở vị trí bên phải phía trên và ảnh đó sẽ không di chuyển theo các đoạn văn bản khi người dùng di chuyển thanh cuộn của trang HTML.
7. Thuộc tính background rút gọn
Chúng ta có thể định dạng cho background bởi 5 thuộc tính color, image, repeat, attachment, position chỉ với một câu lệnh duy nhất
Cú pháp:
Trong đó:
+ 1 là giá trị của thuộc tính background-color
+ 2 là giá trị của thuộc tính background-image
+ 3 là giá trị của thuộc tính background-repeat
+ 4 là giá trị của thuộc tính background-attachment
+ 5 là giá trị của thuộc tính background-position
Lưu ý: Không nhất thiết phải đủ 5 tham số. Tuy nhiên, các tham số phải được sắp xếp theo đúng thứ tự như trên.
8. Lời cuối bài
Đến đây là đã kết thúc một bài dài về chủ đề Background, chắc các bạn đã học được một số kỹ thuật cần thiết để kiểm soát hiển thị hình nền trên các trang HTML bằng CSS. Ở bài sau là phần bài tập của chủ đề này nhằm giúp các bạn càng vững vàng kiến thức.
The post [CSS bài 6] Cách tạo kiểu nền (Background) trong CSS appeared first on Học online.
from WordPress http://ift.tt/2iOkG0C
via IFTTT
Không có nhận xét nào:
Đăng nhận xét