[CSS] Bài 5 : Thuộc Tính Background

Posted by: Rain on 9/02/2013 in HTML và CSS 0

Trong bài các bài trước chúng ta đã tìm hiểu Css là gì? Cú pháp viết CSS và CSS selector hôm nay chúng ta sẽ bắt đầu các bài viết nói về các thuộc tính của CSS. Bài viết hôm nay sẽ là bài viết đầu tiên giới thiệu về thuộc tính Background - thuộc tính này sẽ giúp bạn có thể tạo màu nền và ảnh nền cho các thành phần trên trang web.

1.Tổng Quát:

5 tính chất chính của background mà bạn cần biết đó là:

• background-color : Đặt thuộc tính màu nền
• background-image : Dùng ảnh làm màu nền cho một element
• background-position : Ví trí của ảnh
• background-repeat : Tùy chỉnh ảnh nền có lặp hay không, lặp kiểu nào...
• background-attachment : Đặt chế đố ảnh nền scroll theo trang hoặc là ở vị trí cố định

Chúng ta sẽ đi tìm hiểu từng thuộc tính 1.

2. Cách Tạo Màu nền (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.

Cách Dùng:

1	background-color: #006600;

2	background-color: green;

3	background-color: rgb(0, 102, 0);

4	background-color:  transparent;

Các giá trị của background-color có thể là:

• Tên màu (tiếng anh), ví dụ: black, green…
• Hệ màu RGB, ví dụ: rgb(255,0,0)
• Hệ hex, ví dụ: #000000
• transparent: trong suốt (đây là một giá trị đặc biệt của background-color)

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ơ, đen và xanh da trời.

<h1> I LOVE DESIGN WEB </h1>
<h2>  Sáng Tạo - Học Hỏi </h2>

See the Pen %= penName %> by Nguyễn Hữu Trọng (@Rain) on CodePen

3.Tạo Ảnh nền (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. 

Cú Pháp:

tag { background-image: url(Link hình ảnh) }

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:

1	body { background-image: url(logo.png) }

Với logo.png là file hình được đặt chung với thư mục chứa file CSS. 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 css nên chúng ta chỉ cần ghi logo.png . Nhưng nếu chúng ta tạo thêm một thư mục img trong thư mục gốc và đưa ảnh logo.png vào thư mục img đó  thì chúng ta sẽ phải ghi là background-image:url(img/logo.png). Đôi khi nếu không chắc lắm bạn có thể dùng đường dẫn tuyệt đối cho ảnh. (xem lại bài HTML link)

4.Lặp Lại ảnh nền (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.

Ví Dụ:

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

Ở ví dụ dưới đây mình có một tấm hình có kích thước 65x35px để làm nền cho một thành phần <div class="box"> có độ rộng 170px và độ cao 150px. Khi khai báo thuộc tính background-repeat sẽ có các kết quả tương ứng sau đây:

5. Khóa Ảnh Nền ( 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.

6. Định Vị ảnh nền (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 (hay góc tọa độ 0, 0 theo tọa độ 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ụ:

1	background-position: left top; /* Đặt ảnh ở vị trí trên cùng bên trái */

2	background-position: 50px -10px; /* Đặt ảnh cách mép trái 50px và mép trên 10px */

3	background-position: 0% 50%; /* Căn ảnh theo % */

4	background-position: center center; /* Đặt ảnh ở chính giữa thẻ HTML */

Ví dụ

1

.mybox{

2	width: 150px;

3	height: 100px;

4	border: 1px solid blue;

5	background-color: blue;

6	background-image: url(background.gif);

7	background-repeat: no-repeat;

8	background-position: top right;

9

}

Và đây là kết quả

6. Thuộc Tính Background thu 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

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

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

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à backgroundposition ở dòng mã trên đi:

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.