1.1
Ảnh nền
Để chèn hình ảnh vào trang web, chúng ta có 2 cách: một là
chèn hình ảnh như là một phần của nội dung web (dùng phần tử img, picture), và hai
là chèn ảnh dưới dạng nền (dùng CSS).
Phần này, chúng ta sẽ tìm hiểu các thuộc tính để chèn và thao
tác với ảnh nền. Gồm các thuộc tính sau:
– background-image
– background-repeat
– background-position
– background-attachment
– background-size
– background-origin
– background-clip
– background
1.1.1
Chèn và thao tác với ảnh nền
Chúng ta sử dụng thuộc tính background-image để thêm một ảnh nền cho phần tử HTML bất kì.
Thuộc tính background-image:
– Giá trị: url (vị trí
của tập tin ảnh) | none
– Mặc định: none
– Áp dụng: cho mọi phần
tử
– Kế thừa: không
Nơi chứa ảnh nền được xác định bằng một URL kiểu tương đối,
xét theo vị trí của tập tin mã nguồn chứa thuộc tính background-image.
Nhắc lại một vài quy ước liên quan đến URL kiểu tương đối:
– Nếu tập tin ảnh cùng thư mục với tập tin chứa thuộc tính background-image,
thì giá trị URL chỉ gồm tên tập tin. Ví dụ url(star.png)
– Nếu tập tin ảnh nằm trong thư mục, cùng cấp với tập tin chứa
thuộc tính background-image, thì giá trị URL sẽ gồm tên thư mục và đường dẫn tới
tên tập tin. Ví dụ: url(img/star.png).
Mỗi dấu / (gạch chéo, xuyệt xuôi – forward slash) tương ứng với một cấp của thư
mục. Nếu tập tin ảnh nằm trong các thư mục con lồng nhau, thì chúng ta sẽ sử dụng
các dấu xuyệt xuôi để dẫn tới tập tin ảnh. Ví dụ: url(img/bgimg/star.png).
– Nếu tập tin ảnh nằm trong thư mục cha (hoặc các cấp cao
hơn trong cây thư mục) thì sử dụng kí hiệu “../” ứng với mỗi thư mục, để di
chuyển con trỏ thư mục lên một cấp cao hơn. Ví dụ: nếu thuộc tính
background-image nằm tại css/style.css,
và thư mục css cùng cấp với thư mục img, thì chúng ta có đường dẫn hình ảnh
như sau: url(../img/star.png)
– Có thể sử dụng dấu
“/” để luôn bắt đầu đường dẫn tương đối từ thư mục gốc của website (web root).
Ví dụ: url(/img/star.png). Lưu ý: ở
trường hợp này, bạn không thể chạy và kiểm tra trang web ở chế độ local, mà phải
cấu hình máy tính của bạn thành một web server.
Ví dụ, dưới đây là đoạn mã CSS để thêm ảnh nền cho toàn bộ
trang web (phần tử body) và cho phần
tử blockquote,
body {
background-image: url(star.png);
}
blockquote {
background-image: url(dot.png);
padding: 2em;
border: 4px dashed;
}
Để thực hành ví dụ trên, chúng ta sẽ tải 2 hình ảnh (star.png và dot.png) từ trên mạng, lưu vào cùng thư mục với tập tin mã nguồn
HTML. Kích thước ảnh khoảng 50x50px. Bạn có thể tải ảnh với kích thước bất kì,
sau đó sử dụng các trang web để điều chỉnh kích thước ảnh theo ý muốn.
Xem hình kết quả:
Ở chế độ mặc định, nếu kích thước ảnh nền nhỏ hơn kích thước
của phần tử, thì ảnh nền gốc sẽ được đặt ở góc trên bên trái, sau đó là các bản
sao của ảnh nền. Các bản sao của ảnh nền được sắp xếp theo hàng, hết hàng trên
tới hàng dưới, cho tới khi nào lấp đầy phần tử. Cũng giống như khi thiết lập
màu nền, vùng được chèn ảnh nền bao gồm: vùng nội dung, vùng đệm phía trong đường
viền (padding), và đường viền (border).
Nếu một phần tử được thiết lập cả màu nền (background-color)
và ảnh nền (background-image) thì ảnh nền sẽ nằm phía trên của màu nền. Vì lý
do này, nên thiết lập màu nền tương tự như màu chủ đạo của ảnh nền, đề phòng
trường hợp không tải được ảnh nền thì vẫn có màu nền phù hợp, và không ảnh hưởng
nhiều đến chất lượng trang web.
Khi thêm ảnh nền, cần chú ý một số điểm sau:
– Sử dụng ảnh nền phù hợp để dễ đọc phần nội dung (như ví dụ
ở hình trên là không phù hợp, chữ màu đen, nền màu xanh làm cho người dùng rất
khó đọc được nội dung)
– Luôn thiết lập màu nền dự phòng (background-color), chọn
màu nền tương tự với màu chủ đạo của ảnh nền
– Đảm bảo kích thước của ảnh nền luôn ở mức nhỏ nhất có thể
Nhân bản ảnh nền
Như ở phần trên đã nói, ở chế độ mặc định, nếu ảnh nền nhỏ
hơn phần tử thì ảnh nền sẽ được nhân bản thành nhiều ảnh và sắp xếp từ trái qua
phải, từ trên xuống dưới, cho tới khi nào lấp đầy phần tử. Để thay đổi chế độ nhân
bản ảnh nền, chúng ta sử dụng thuộc tính background-repeat.
Thuộc tính background-repeat:
– Giá trị: repeat |
repeat-x | repeat-y | no-repeat | space | round
– Mặc định: repeat
– Áp dụng: cho mọi phần
tử
– Kế thừa: không
Ví dụ, nếu chỉ muốn ảnh nền xuất hiện một lần, sử dụng giá
trị no-repeat,
body {
background-image: url(star.png);
background-repeat: no-repeat;
}
Ví dụ, nếu chỉ muốn ảnh nền lặp lại trên một hàng ngang, sử
dụng giá trị repeat-x,
body {
background-image: url(star.png);
background-repeat: repeat-x;
}
Ví dụ, nếu chỉ muốn ảnh nền lặp lại trên một hàng dọc, sử dụng
giá trị repeat-y,
body {
background-image: url(star.png);
background-repeat: repeat-y;
}
Nếu để ý, khi nhân bản ảnh nền, sẽ
có nhiều trường hợp ảnh nhân bản bị cắt xén. Để tránh điều này, chúng ta sử
dụng 2 giá trị space và round cho thuộc tính background-repeat. Với giá trị space, trình duyệt sẽ ước lượng số ảnh cần nhân bản và duy trì kích thước
ban đầu của ảnh. Với giá trị round, cũng
giống như giá trị space, tuy nhiên,
trình duyệt sẽ thay đổi kích thước của ảnh (co dãn ảnh) để lấp đầy không gian
trống của phần tử.
Xem hình minh họa các giá trị của
thuộc tính background-repeat:
Xác định vị trí đặt ảnh
gốc
Chúng ta sử dụng thuộc tính background-position để xác định vị trí đặt ảnh gốc (origin image). Ảnh
gốc là ảnh đầu tiên đặt vào nền, việc nhân bản các ảnh sau đó sẽ dựa vào ảnh gốc
này.
Thuộc tính background-position:
– Giá trị: đơn vị đo
chiều dài | % | left | center | right | top | bottom
– Mặc định: 0% 0%
(tương đương với left top)
– Áp dụng: cho mọi phần
tử
– Kế thừa: không
Vị trí đặt ảnh gốc được xác định bằng 2 giá trị, thể hiện vị
trí theo chiều ngang và chiều dọc của phần tử. Chúng ta có một số cách xác định
vị trí như sau:
Dùng từ khóa
Các từ khóa left,
center, right, top, bottom là các vị trí tương đối, tính từ mép trong đường
viền của phần tử. Ví dụ, nếu giá trị của background-position là left thì sẽ đặt ảnh gốc ở sát mép đường
viền trái của phần tử.
Vị trí mặc định để đặt ảnh gốc là bên trái, phía trên: left, top.
Các từ khóa này thường được sử dụng theo cặp, ví dụ,
background-position: left bottom;
background-position: right center;
Nếu chỉ cung cấp một từ khóa, thì trình duyệt sẽ ngầm hiểu từ
khóa còn lại là center. Ví dụ, nếu
khai báo là,
background-position: left
Thì cũng sẽ tương đương với khai báo,
background-position: left center
Dùng đơn vị đo
Chúng ta cũng có thể xác định vị trí của ảnh gốc dựa vào khoảng
cách so với biên trái và biên trên của phần tử, sử dụng đơn vị đo là pixel, khoảng
cách với biên trái được viết trước, biên trên viết sau.
Ví dụ,
background-position: 200px 50px;
Dùng %
Giá trị % cũng luôn được sử dụng theo cặp ngang/dọc, với 0% 0% sẽ tương ứng với
bên trái góc trên; 100% 100% sẽ tương ứng với bên phải góc dưới. Lưu ý, giá trị
% này sẽ áp dụng cho cả vùng nền (vùng canvas) và ảnh gốc, nghĩa là ảnh gốc sẽ
không thể vượt ra khỏi vùng nền. Ví dụ, giá trị 100% 100% sẽ đặt phần bên phải góc dưới của ảnh gốc vào bên phải góc dưới của vùng nền. Nếu chỉ
cung cấp một giá trị % thì giá trị còn lại sẽ được ngầm hiểu là 50% (center).
Hình sau là ví dụ đặt ảnh gốc ở các vị trí khác nhau,
Cố định ảnh nền
Mặc định, khi bạn cuộn nội dung trang web, ảnh nền sẽ bị cuộn
theo phần nội dung. Tuy nhiên, chúng ta có thể sử dụng thuộc tính background-attachment để cố định ảnh nền.
Thuộc tính background-attachment:
– Giá trị: scroll |
fixed | local
– Mặc định: scroll
– Áp dụng: cho mọi phần
tử
– Kế thừa: không
Với thuộc tính background-attachment,
chúng ta có thể tùy chọn để ảnh nền cuộn theo nội dung (scroll), hoặc nằm cố định
(fixed) so với cửa sổ trình duyệt (viewport), hoặc chỉ cuộn theo nội dung của một
phần tử (local) chứ không theo thanh cuộn của cửa sổ trình duyệt.
Thuộc tính background-size
Các giá trị của thuộc tính background-size: length | percentage | auto | contain | cover
Thuộc tính background-size
được sử dụng để thiết lập lại kích thước của ảnh nền, gồm chiều rộng và chiều
cao (ví dụ 100px 200px), nếu chỉ thiết lập một chiều thì chiều còn lại sẽ là auto. Nếu muốn ảnh nền nằm trọn trong phần
tử chứa nó thì thiết lập giá trị là contain,
trường hợp này có thể còn những chỗ không được phủ ảnh nền (ví dụ phần tử hình
chữ nhật mà ảnh nền lại hình tròn). Nếu muốn ảnh nền phủ toàn bộ phần tử chứa
nó thì thiết lập giá trị là cover,
trường hợp này có thể có một phần của ảnh nền bị tràn ra khỏi phần tử chứa nó.
Thuộc tính background-origin
Các giá trị của thuộc tính background-origin: border-box | padding-box | content-box
Thuộc tính background-origin được sử dụng để xác định cách tính vị trí cho thuộc
tính background-position. Nghĩa là, vị
trí bắt đầu được tính sẽ là mép ngoài đường viền (border-box) hay mép ngoài vùng padding (padding-box), hay mép ngoài nội dung (content-box).
Các giá trị của thuộc tính background-clip: border-box | padding box |
content-box
Thuộc tính background-clip được sử dụng để xác định phạm vi bao phủ của ảnh nền
(xén bớt ảnh nền, từ clip nghĩa là xén bớt đi, cắt bớt đi). Mặc định ảnh nền sẽ
được phủ vùng nội dung, vùng đệm phía trong đường viền, và nền của đường viền (border-box). Nếu chỉ muốn phủ vùng nội
dung và vùng đệm phía trong đường viền thì thiết lập giá trị là padding-box (cái hộp chứa hết phần
padding). Nếu chỉ muốn phủ vùng nội dung thì thiết lập giá trị là content-box (hộp chứa nội dung).
Thuộc
tính background
Có thể sử dụng thuộc tính background để thiết lập tất cả các định dạng liên quan đến ảnh nền trong
một khai báo CSS.
Thuộc tính background:
– Giá trị: background-color
background-image background-repeat background-attachment
background-position | background-clip
| background-origin | background-size
– Mặc định: tùy thuộc
vào giá trị mặc định của mỗi thuộc tính
– Áp dụng: cho mọi phần
tử
– Kế thừa: không
Cũng giống như thuộc tính font, các giá trị của thuộc tính background chính là giá trị của từng thuộc tính đã được liệt kê ở
trên.
Ví dụ,
body { background:
white url(star.png) no-repeat right top fixed; }
Chỉ dẫn CSS trên là viết rút gọn của các chỉ dẫn CSS sau:
body {
background-color: white;
background-image: url(arlo.png);
background-repeat: no-repeat;
background-position: right top;
background-attachment: fixed;
}
Các giá trị trong thuộc tính background đều là tùy chọn, và không cần
theo thứ tự. Chỉ có một lưu ý là khi khai báo giá trị của thuộc tính background-position thì phải khai báo
giá trị chiều ngang (horizontal value) trước, ngay sau đó là giá trị chiều dọc.
Nếu giá trị nào không khai báo trình duyệt sẽ sử dụng giá trị mặc định.
Cẩn thận khi sử dụng thuộc tính background để tránh bị ghi đè. Quan sát
ví dụ sau,
h1, h2, h3 { background: red url(dots.gif) repeat-x;}
h3 {background: green;}
Mục đích của chỉ dẫn CSS ở hàng thứ hai là muốn thay đổi màu
nền dự phòng cho h3 từ red sang green, tuy nhiên trong chỉ dẫn lại không khai báo giá trị background-image cho phần tử h3, nên giá trị của nó sẽ được thiết lập
là mặc định (none), điều này vô tình
đã ghi đè lên giá trị background-image
ở hàng 1. Nghĩa là h3 sẽ không được
thiết lập ảnh nền star.png. Vậy để
ghi đè một thuộc tính cụ thể nào đó thì nên dùng tên thuộc tính dạng đầy đủ, chứ
không nên sử dụng thuộc tính rút gọn. Chỉ dẫn ở hàng thứ hai nên viết lại là,
h3 {background-color: green;}
CSS3 cho phép chèn nhiều ảnh nền cho một phần tử. Để thực hiện,
sử dụng thuộc tính background-image,
mỗi giá trị của thuộc tính này là một ảnh nền, được ngăn cách nhau bằng dấu phẩy.
Các thuộc tính liên quan cũng được liệt kê thành một dãy, mỗi giá trị ngăn cách
nhau bằng dấu phẩy, giá trị đầu tiên sẽ áp dụng cho ảnh đầu tiên, giá trị thứ
hai sẽ áp dụng cho ảnh thứ hai, lần lượt cho đến hết. Ảnh được liệt kê trước
trong thuộc tính background-image sẽ
nằm ở phía trên cùng của nền, sau đó lần lượt đến các ảnh tiếp theo.
Ví dụ,
body {
background-image: url(image1.png), url(image2.png),
url(image3.png);
background-position: left top, center center, right bottom;
background-repeat: no-repeat; no-repeat; no-repeat;
…
}
Lưu ý: mặc dù các chỉ dẫn của CSS hoạt động theo kiểu “cái
nào áp dụng sau sẽ được ưu tiên”. Tuy nhiên, trong trường hợp chèn nhiều ảnh nền
thì nó làm việc theo kiểu khác, cứ tưởng tượng, cái nền có thể xếp được nhiều ảnh,
khi đó ảnh nào nằm cuối danh sách sẽ được đặt ở dưới cùng, sau đó là các ảnh tiếp
theo, ảnh ở đầu danh sách sẽ nằm ở trên cùng.
Có thể sử dụng thuộc tính background để viết các luật CSS được gọn hơn, ví dụ,
body {
background:
url(image1.png) left top no-repeat,
url(image2.png) center center no-repeat,
url(image3.png) right bottom no-repeat;
…
}
Vì có một số phiên bản của trình duyệt IE không hỗ trợ chèn
nhiều ảnh nền bằng thuộc tính background,
nên để tăng khả năng tương thích của trang web, khi viết mã sẽ sử dụng thêm thuộc
tính background-image để dự phòng,
sau đó là các hình ảnh của thuộc tính background.
Nếu trình duyệt có hỗ trợ background,
thì thuộc tính này sẽ đè thuộc tính background-image.
Cuối cùng luôn dự phòng một màu nền bằng thuộc tính background-color. Ví dụ,
body {
/* cho các trình duyệt không hỗ trợ nhiều giá trị trong thuộc
tính background */
background-image: url(image_fallback.png) top left no-repeat;
background:
url(image1.png) left top no-repeat,
url(image2.png) center center no-repeat,
url(image3.png) right bottom no-repeat;
background-color: papayawhip; /* màu nền dự phòng */
}
-----
-----