Bài viết này cung cấp kiến thức cho bạn để thiết lập các tính chất nền của một phần tử HTML.

Những ví dụ này sử dụng Cascading Style Sheets (CSS). Sử dụng CSS, bạn có thể thiết lập các thuộc tính nền tảng của bất kỳ phần tử HTM nào. Thêm vào đó bạn có thể làm những việc hơn thế như xác định vị trí của hình ảnh, cho dù đó nên lặp lại, làm thế nào nó sẽ lặp lại,…

Màu nền

Bạn có thể thiết lập màu nền của bất kỳ phần tử HTML bằng cách sử dụng thuộc tính background-color

c1

Chọn một màu sắc với các bảng màu HTML .

Hình nền

Bạn có thể thiết lập một hình nền bằng cách sử dụng thuộc tính background-image

Sử dụng đoạn mã dưới đây, bạn cần phải thay đổi /pix/samples/bg1.gif, vị trí của hình nền của bạn. Bạn có thể chọn hình nền tùy ý và miễn phí trong thư mục.

c2

Cố định ảnh nền

Bạn có thể sửa chữa các vị trí của một hình ảnh nền sao cho vị trí của nó là cố định ngay cả khi bạn kéo thanh cuộn lên xuống. Bạn sử dụng thuộc tính  background-attachment. Một lần nữa, bạn cần thay đổi /pix/samples/bg1.gif vị trí của hình nền của bạn.

c3

c4

Viết tắt mã nền

Bạn có thể sử dụng CSS thuộc tính background để thiết lập tất cả các tính chất nền cùng một lúc. Vì vậy, bạn có thể thiết lập thuộc tính background-attachment, background-color, background-image, background-position, background-repeat trên cùng một nền

Do đó, bằng cách sử dụng mã ví dụ trước, chúng ta có thể viết lại nó thế này:

c5

Nền cho cả trang

Để thiết lập các tính chất nền cho toàn bộ trang, chỉ cần áp dụng các thuộc tính body 

c8

Gradients nền

CSS3 cho phép bạn tạo ra  “nền gradient” có hiệu lực. Đây là nơi mà bạn có thể làm cho màu sắc khác nhau hòa quyện cùng độc đáo trên một phần tử HTML.

Xem thêm:

Còn nhiều bài viết hữu ích tại thiết kế web, các bạn đón đọc nhé.

Trả lời

Thư điện tử của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *