Loading post navigation ...
 
 

Pro page

5
Nhận xét

Cơ bản về background trong CCS

| by Phan Dũng | views

Hãy nhấn thanks để ủng hộ tác giả

Cơ bản về background trong CCS
Bài viết sưu tầm trên VWG nhằm lưu trữ để học hỏi

Trước khi chưa có sự ra đời của CSS, chúng ta chỉ có thể tạo được màu nền cho toàn trang hoặc cho một table nào đấy thôi. Công nghệ web phát triển cho phép ta có thể tạo màu nền bất cứ thành phần nào trên trang. Thuộc tính này trong CSS có cấu trúc giống nhau cho mọi tag là: background-color.

Ví dụ:

- cho một lớp:

.lop { background-color:blue; }

- lớp nằm trong một tag, ví dụ

div.lop { background-color:blue; }
- Một tag nào đấy, ví dụ

P { background-color:blue; }

Bạn có thể định nghĩa màu theo mã HEXA hoặc RGB.

Hình nền:

Với CSS, bạn cũng có thể tạo một hình nền cho bất cứ thành phần nào trên trang. Ví dụ:

td.tieude {background-image: url(http://host.com/images/tile.gif); }
.myclass {background-image: url(http://host.com/images/xyz.gif);


Nếu như trong cùng một lớp hoặc tag bạn định nghĩa đồng thời cả hình nền và màu nền thì theo thứ tự hình nền sẽ hiển thị trước và sau đó sẽ tới màu nền. Màu nền sẽ có tác dụng khi user tắt chế độ xem ảnh khi duyệt web.Ví dụ:

.myclass {background-color:#FF0000; }
.myclass {background-image: url(http://host.com/images/xyz.gif);



Điều chỉnh hình nền:

Với một hình nền bất kì, bạn có thể cho phép ảnh đó lặp lại hay không, định vị trí, khóa hình nền,... Sau đây là một vài ví dụ:

- Hình nền không lặp lại (chỉ hiện 1 lần ở top left):

p { background-image: url(../images/bg.gif);
background-repeat: no-repeat; }


- Lặp lại theo chiều ngang:

p {background-image: url(../images/bg.gif);
background-repeat: repeat-x; }


- Lặp lại theo chiều dọc:

p {background-image: url(../images/bg.gif);
background-repeat: repeat-y; }


- Hình nền bị khóa, sẽ không trượt theo khi bạn scroll:

body {background-image: url(../images/bg.gif);
background-attachment: fixed; }


- Định vị trí cho hình nền. Ví dụ ở đây là góc bên phải phía dưới:

p {background-image: url(../img/bga.gif);
background-position: right bottom; }


- Định tọa độ đặc biệt cho hình nền, tính từ góc trên trái (top left):

p {background-position: 20px 15px; }

Câu lệnh rút gọn:

Bạn có thể kết hợp những thứ linh tinh ở trên thành 1 câu lệnh duy nhất. Việc làm này giúp ta tiết kiệm thời gian hơn và code cũng sẽ đẹp hơn. Ví dụ:

body {background: #cc33ff url(images/background.gif) repeat-x top right; }

Các thành phần trên cũng không nhất thiết phải theo thứ tự như vậy, hoàn toàn có thể thay đổi được:

body {background: url(images/background.gif)#cc33ff repeat-x top right; }


Enter your mail address:

5

Ngankvn ®

Mình thử chỉnh Background cho Iframe :)) , Có tác dụng với các trình duyệt khác nhưng IE thì không :))

Phan Dũng

mấy cái vụ không hiển thị tốt trên IE mình không rành, nên không thể giải đáp thắc mắc này của Ngân được .

nobita32

anh ơi cho em hỏi chút được không ah...hiện tại em thấy có rất nhiều blogger làm hình nền sau đó điều chỉnh cái outter trong suốt...tuy trong suốt nhưng lại vẫn hiện lên màu nghĩa là có màu nhưng nhìn xuyên qua được ý ah...e cũng không biết diễn tả sao....nó giống như blog của Ngankvn hiện tại đang để ý ah...a có thể hưóng dẫn em cách làm như vậy được không ah...cám ơnanh rất nhiều

Khách (ẩn danh)

Muốn trong suốt hình nền thì phải dùng hình file PNG -24. Tuy nhiên IÊ ko được.Muốn được trong IÊ thì phải Fix

Khách (ẩn danh)

IE6 thì bạn phải Fix. Còn IE7 7 trở lên thì ok.



☺ Các bạn có thể viết lời bình của mình cho bài viết, và tuân thủ một số quy tắc sau:
» Các bài comment phải nghiêm túc, không dung tục, không spam.
» Nội dung phải liên quan tới chủ đề bài viết.
» Có thể sử dụng thẻ trích dẫn [quote], cấu trúc thẻ như bên dưới :

[quote=AUTHOR name=fdquote]NỘI DUNG[/quote]

» Có thể sử dụng các thẻ <b>,<i>,<a>.


BlOg FD chính thức đóng comment của khách ẩn danh.

BlOg FD.

[▼/▲] More Emoticons
:)) ;)) ;;) :D ;) :p :(( :) :( :X =(( :-o :-/ :-* :| 8-} :)] ~x( :-t b-( :-L x( =))

Newer Posts Older Posts Home