thuộc tính background

thuộc tính background Người đăng: Chiến Thần Ngày: 09012017 Thuộc tính background trong CSS giúp chúng ta xác định nền cho thẻ HTML. Bạn thấy nền màu xanh đỏ,.. thấy ảnh nền thế này, thế kia. Đó chính là background. Thuộc tính background dùng khá thường xuyên trong CSS. Học css: thuộc tính background Thuộc tính background là tổng hợp của tất cả các thuộc tính con. Khi viết CSS, bạn có thể thực hiện riêng rẽ các thuộc tính con backgroundcolor backgroundimage backgroundrepeat backgroundattachment backgroundposition Background Color Thuộc tính Background Color dùng để xác định màu nền cho thẻ HTML. Background Color được dùng với cấu trúc như sau body { backgroundcolor: red; } Xem demo. Trong CSS, để xác định màu sắc, chúng ta thường sử dụng 1 trong các giá trị sau: Mã màu. Ví dụ: ff0000,… Tên màu sắc. Ví dụ: red, black… Hệ màu RGB. Ví dụ như: rgb(255,0,0) Mã màu và hệ màu RGB bạn dùng photoshop để lấy. Còn tên màu thì nó là từ tiếng Anh của màu sắc. Ví dụ sau sẽ thiết lập màu nền cho các thẻ h1, h2, h3 h1 { backgroundcolor: green; } h2 { backgroundcolor: blue; } h3 { backgroundcolor: pink; } Xem demo. Background Image Background Image dùng để đặt ảnh nền cho thẻ html Ví dụ: body { backgroundimage: url(anh.jpg); } Xem demo. Khi dùng ảnh làm nền thì cần chú ý các thuộc tính như sau: backgroundrepeat: Thiết lập sự lặp đi lặp lại của ảnh để phủ hết thẻ HTML. backgroundrepeat có giá trị như sau: repeat và noreepeat, repeatx, repeaty repeat: ảnh sẽ lặp đi lặp lại đến khi nào phủ hết thẻ HTML. Măc định, khi thiết lâp backgroundimage ảnh repeat Norepeat: ảnh không lặp đi lặp lại. repeatx: chỉ lặp lại theo chiều ngang repeaty: chỉ lặp lại theo chiều dọc Ví dụ: p { backgroundimage: url(anh.jpg); backgroundrepeat: norepeat; } Xem demo. backgroundattachment . Dùng thuôc tính này để cố định ảnh khi nội dung HTML quá dài và kéo xuống dưới. Thuộc tính backgroundattachment thường chỉ dùng 1 giá trị là Fixed. Ví dụ: body { backgroundimage: url(anh.jpg); backgroundrepeat: norepeat; backgroundposition: right top; backgroundattachment: fixed; } Xem demo. Backgroudposition . Dùng để thiết lập vị trí cho ảnh đặt làm background. Giá trị mặc định sẽ là top left. Bạn có thể thể dùng các giá trị như sau: top, left, right, center, bottom. Trong 1 số trường hợp bạn có thể px. Nó là 1 con số cụ thể nào đó. Ví dụ: body { backgroundimage: url(canh.jpg); backgroundrepeat: norepeat; backgroundposition: right top; } Top right : nghĩa là ảnh nằm trên cùng phía bên phải Xem demo. hoặc body { backgroundimage: url(canh.jpg); backgroundrepeat: norepeat; backgroundposition: 10px 5px; } backgroundposition: 10px 5px nghĩa là: ảnh cách lề trên 10px, cách lề trái 5px Xem demo. Khi đã quen cách dùng background rồi. Bạn có thể dùng tổng hợp lại để viết CSS cho nhanh. Ví dụ: body { background: ffffff url(canh.jpg) norepeat right top; } Xem demo. Nhớ thứ tự khi thiết lập giá trị các thuộc tính: backgroundcolor backgroundimage backgroundrepeat backgroundattachment backgroundposition Nếu bạn không thiết lập thuộc tính nào đó, nó sẽ nhận giá trị mặc định. Một vài chú ý: Khi sử dụng các thuộc tính của CSS thì bạn phải dùng dấu gạch ngang chứ không phải dấu gạch dưới. backgroundposition chứ không phải background_position Các đơn vị đi kèm phải viết sát, không có dấu cách. Ví dụ: Sử dụng sai: backgroundposition: 10 px 5px; Đúng là: backgroundposition: 10px 5px; Đường dẫn ảnh ở các ví dụ mình đặt là: url(canh.jpg). Nếu các bạn tải về máy chạy thử thì phải để đầy đủ là url(https:tech12h.comcanh.jpg) thì mới chạy đúng. Nếu viết mỗi mình background thì CSS hiểu là backgroundcolor. Ví dụ: body { background: red; } Cách để học nhanh thuộc tính background: Bạn chỉ cần nhớ background là thuộc tính đặt nền cho thẻ HTML. Nền thì chỉ có màu sắc hoặc ảnh nền. Bạn cứ viết thuộc tính đơn giản đầu tiên. Sau đó, muốn căn chỉnh gì thì mình thêm vào sử sau: đặt màu nền(background), đặt ảnh nền(backgroundimage). Và chỉ cần viết background. Các giá trị đằng sau chỉ cần đúng cấu trúc là CSS nó nhận biết hết Muốn đặt màu nền: body { background: green; } Muốn đặt hình nền thì bạn lại dùng: body { background: url(canh.jpg); } Xem demo. Kết luận: Thuộc tính background được dùng khá thường xuyên trong CSS. Do vậy, khi học HTML thì bạn cần phải nắm được các dùng thuộc tính này.

thuộc tính background

Người đăng: Chiến Thần - Ngày: 09/01/2017

Thuộc tính background trong CSS giúp chúng ta xác định nền cho thẻ HTML Bạn thấy nền màu xanh đỏ, thấy ảnh nền thế này, thế kia Đó chính là background Thuộc tính background dùng khá thường xuyên trong CSS.

Thuộc tính background là tổng hợp của tất cả các thuộc tính con Khi viết CSS, bạn có thể thực hiện riêng rẽ các thuộc tính con

• background-color

• background-image

• background-repeat

• background-attachment

• background-position

Background Color

Thuộc tính Background Color dùng để xác định màu nền cho thẻ HTML

Background Color được dùng với cấu trúc như sau

body {

background-color: red;

}

Xem demo

Trong CSS, để xác định màu sắc, chúng ta thường sử dụng 1 trong các giá trị sau:

• Mã màu Ví dụ: #ff0000,…

• Tên màu sắc Ví dụ: red, black…

• Hệ màu RGB Ví dụ như: rgb(255,0,0)

Mã màu và hệ màu RGB bạn dùng photoshop để lấy Còn tên màu thì nó là từ tiếng Anh của màu sắc

Ví dụ sau sẽ thiết lập màu nền cho các thẻ h1, h2, h3

h1 {

background-color: green;

}

h2 {

background-color: blue;

}

h3 {

background-color: pink;

}

Xem demo

Background Image

Background Image dùng để đặt ảnh nền cho thẻ html

Ví dụ:

body {

background-image: url("anh.jpg");

}

Xem demo

Khi dùng ảnh làm nền thì cần chú ý các thuộc tính như sau:

background-repeat:

Thiết lập sự lặp đi lặp lại của ảnh để phủ hết thẻ HTML background-repeat có giá trị như sau: repeat và no-reepeat, repeat-x, repeat-y

repeat: ảnh sẽ lặp đi lặp lại đến khi nào phủ hết thẻ HTML Măc định, khi thiết lâp background-image ảnh repeat

No-repeat: ảnh không lặp đi lặp lại

repeat-x: chỉ lặp lại theo chiều ngang

repeat-y: chỉ lặp lại theo chiều dọc

Ví dụ:

p {

background-image: url("anh.jpg");

background-repeat: no-repeat;

}

Xem demo

background-attachment

Dùng thuôc tính này để cố định ảnh khi nội dung HTML quá dài và kéo xuống dưới Thuộc tính

background-attachment thường chỉ dùng 1 giá trị là Fixed

Ví dụ:

body {

background-image: url("anh.jpg");

background-repeat: no-repeat;

background-position: right top;

background-attachment: fixed;

}

Xem demo

Backgroud-position

Dùng để thiết lập vị trí cho ảnh đặt làm background Giá trị mặc định sẽ là top left

Bạn có thể thể dùng các giá trị như sau: top, left, right, center, bottom Trong 1 số trường hợp bạn có thể

px Nó là 1 con số cụ thể nào đó

Ví dụ:

body {

background-image: url("canh.jpg");

background-repeat: no-repeat;

background-position: right top;

}

Top right : nghĩa là ảnh nằm trên cùng phía bên phải

Xem demo

hoặc

body {

background-image: url("canh.jpg");

background-repeat: no-repeat;

background-position: 10px 5px;

}

background-position: 10px 5px nghĩa là: ảnh cách lề trên 10px, cách lề trái 5px

Xem demo

Khi đã quen cách dùng background rồi Bạn có thể dùng tổng hợp lại để viết CSS cho nhanh.

Ví dụ:

body {

background: #ffffff url("canh.jpg") no-repeat right top;

}

Xem demo

Nhớ thứ tự khi thiết lập giá trị các thuộc tính:

• background-color

• background-image

• background-repeat

• background-attachment

• background-position

Nếu bạn không thiết lập thuộc tính nào đó, nó sẽ nhận giá trị mặc định

Một vài chú ý:

Khi sử dụng các thuộc tính của CSS thì bạn phải dùng dấu gạch ngang chứ không phải dấu gạch dưới background-position chứ không phải background_position

Các đơn vị đi kèm phải viết sát, không có dấu cách Ví dụ:

Sử dụng sai: background-position: 10 px 5px;

Đúng là: background-position: 10px 5px;

Đường dẫn ảnh ở các ví dụ mình đặt là: url("canh.jpg") Nếu các bạn tải về máy chạy thử thì phải để đầy

đủ là url( https://tech12h.com/canh.jpg") thì mới chạy đúng

Nếu viết mỗi mình background thì CSS hiểu là background-color

Ví dụ:

body {

background: red;

}

Cách để học nhanh thuộc tính background: Bạn chỉ cần nhớ background là thuộc tính đặt nền cho thẻ HTML Nền thì chỉ có màu sắc hoặc ảnh nền Bạn cứ viết thuộc tính đơn giản đầu tiên Sau đó, muốn căn chỉnh gì thì mình thêm vào sử sau: đặt màu nền(background), đặt ảnh nền(background-image) Và chỉ cần viết background Các giá trị đằng sau chỉ cần đúng cấu trúc là CSS nó nhận biết hết

Muốn đặt màu nền:

body {

background: green;

}

Muốn đặt hình nền thì bạn lại dùng:

body {

background: url("canh.jpg");

}

Xem demo

Kết luận: Thuộc tính background được dùng khá thường xuyên trong CSS Do vậy, khi học HTML thì

bạn cần phải nắm được các dùng thuộc tính này