Hinh Anh Ghep Chu Hai Huoc
Tạm gác qua các khái niệm về Box Model qua một bên mà ở phần này chúng ta sẽ làm quen với một loại thuộc tính cũng rất thú vị và có tác dụng làm đẹp website của bạn lên hơn, đó là các thuộc tính thêm màu nền và ảnh nền cho website hoặc bất kỳ một phần tử dạng block nào. Màu nền với background-color Nếu bạn muốn thiết lập màu nền bằng CSS thì có thể sử dụng thuộc tính background-color và giá trị của nó là tên màu, hoặc mã màu HEX/RBG, mình thì thường dùng nhất là mã màu Hex vì nó đa dạng và dễ dùng hơn. Ảnh nền với background-image Đối với thuộc tính thêm ảnh nền thì chúng ta sẽ sử dụng background-image và nó còn có thêm khá nhiều thuộc tính khác nữa kèm theo mà mình sẽ nói bên dưới. Dưới đây là ví dụ lấy một tấm ảnh sử dụng làm ảnh nền. Nhớ là đối với các giá trị loại URL thì bạn phải có một cái hàm url() để bọc cái đường dẫn của URL lại nhé. Ngoài ra, bạn có thể thêm nhiều ảnh nền khác nhau trên cùng một block bằng cách sử dụng nhiều giá trị url() và các giá trị phải được cách nhau bởi dấu phẩy.
Đơn vị thường được sử dụng để xác định giá trị cho thuộc tính background-position này là px. Ví dụ sau minh họa cách thiết lập vị trí hình nền cách cạnh trái 100 px. background-position:100px;}
Vi du ve dat hinh nen tai mot vi tri cu the. Ví dụ sau minh họa cách thiết lập vị trí hình nền cách cạnh trái 100 px, và cạnh trên 200px. background-position:100px 200px;}
Vi tri hinh nen duoc xac dinh la: 100px va 200px. Nếu bạn muốn thiết lập hình nền là cố định hay là có thể scroll được, bạn sử dụng thuộc tính background-attachment trong CSS. Thuộc tính này nhận hai giá trị là fixed và scroll tương ứng. Hai ví dụ dưới đây minh họa cách sử dụng hai giá trị này của thuộc tính background-attachment trong CSS. background-image: url('.. /css/images/'); background-repeat: no-repeat; background-attachment: fixed;}
Hinh nen duoc dat co dinh. Ban khong the Scroll.
Ví dụ sau minh họa cách thiết lập cho hình nền có thể Scroll: background-attachment:scroll;}.Vi du minh hoa cho gia tri scroll cua thuoc tinh background-attachment.
Đánh giá - Bình luận
Mong rằng mọi người sẽ lựa chọn cho mình một ảnh tết đẹp nhất nha.
Mẫu Background Bokeh Đây là một bộ nền hiệu ứng bokeh bạn có thể tải xuống miễn phí! Tuyệt vời cho hình nền máy tính để bàn, hình nền trang web và các yếu tố giao diện người dùng. Hiệu ứng bokeh dường như không bao giờ cũ, vì vậy đừng ngại sử dụng nó cho bất kỳ dự án cá nhân hoặc thương mại nào bạn có thể có. Cardboard Background Vector miễn phí Đây là một vector nền tông miễn phí, chất lượng cao và ở độ phân giải rất tốt. Bạn có thể sử dụng nó cho các mục đích khác nhau, cho các ứng dụng, trang web hoặc thiết kế khác. Các tông nền có thể được sử dụng trong các kích cỡ khác nhau bởi vì nó đi kèm trong một tập tin vector đó là rất dễ dàng để thay đổi và thay đổi kích cỡ. Do tông màu nâu trung tính của các tông, chúng tôi khuyên bạn nên sử dụng nó đặc biệt cho các ứng dụng và trang web. 4 preview background miễn phí Đây là một gói 4 hình nền có dạng PNG chất lượng cao. Chúng có thể cực kỳ hữu ích cho việc thiết kế biểu tượng, xây dựng mô hình, bản trình bày logo, công việc UI / UX, trang web hoặc bất kỳ thứ gì bạn có thể nghĩ đến.
repeat-y: Hình nền sẽ chỉ được lặp đi lặp lại theo chiều dọc. no-repeat: Hình nền sẽ không được lặp đi lặp lại. Dưới đây là các ví dụ minh họa cho các giá trị của thuộc tính backgroud-color. Để thực hành, bạn nên chọn các hình ảnh có kích cỡ nhỏ để thấy rõ hiệu ứng. Theo mặc định, thuộc tính background-repeat sẽ có giá trị repeat. background-repeat: repeat;}
Vi du ve gia tri mac dinh cua thuoc tinh background-repeat trong CSS.