Vị trí nền trong css

Thuộc tính nền là một trong các thuộc tính khá phổ biến của CSS. Trong bài viết này, tôi muốn nói đến các tính chất riêng của nền tảng và cách sử dụng như thế nào cho đúng. (CSS2)

Tổng số

5 tính chất chính của nền mà bạn cần biết đó là

• màu nền. Đặt thuộc tính màu nền
• hình nền. Sử dụng ảnh làm màu nền cho một phần tử
• vị trí nền. Vị trí của ảnh
• Bối cảnh Lặp lại. Tùy chỉnh ảnh nền có chính xác hay không, bất kỳ loại nào
• tệp đính kèm nền. Đặt chế độ đối với ảnh nền cuộn theo trang hoặc ở vị trí cố định

Cách sử dụng đơn giản

sử dụng màu nền khi bạn muốn đặt một màu đặc cho một phần tử, bạn có thể sử dụng theo 1 trong 4 cách sau

background-color: #006600;
background-color: green;
background-color: rgb(0, 102, 0);
background-color:  transparent;

hình nền bạn có thể sử dụng một hình ảnh bất kỳ trên internet hoặc cùng một máy chủ để làm hình nền cho một phần tử

background-image: url(http://vannyneo.com/themes/vannyneo3/images/logo.png);
background-image: url(../images/logo.png);

Nếu bạn sử dụng thẻ img thì người dùng có thể dễ dàng lưu lại tệp ảnh của bạn, nhưng nếu bạn không muốn họ lưu lại, bạn có thể sử dụng hình nền để gây khó khăn cho người dùng

background-position giúp bạn đặt chính xác vị trí ảnh so với thẻ HTML

background-position: left top; /* Đặt ảnh ở vị trí trên cùng bên trái */
background-position: 50px -10px; /* Đặt ảnh cách mép trái 50px và mép trên 10px */
background-position: 0% 50%; /* Căn ảnh theo % */
background-position: center center; /* Đặt ảnh ở chính giữa thẻ HTML */

background-repeat Tùy chỉnh ảnh nền có hay không, kiểu lặp nào. The main value of background-repeat

background-repeat: repeat; /* Lặp theo 2 chiều ngang và dọc - Giá trị mặc định */
background-repeat: repeat-y; /* Chỉ lặp theo chiều dọc */
background-repeat: repeat-x; /* Chỉ lặp theo chiều ngang */
background-repeat: no-repeat; /* Không lặp */

background-attachment Chắc chắn bạn ít thấy đoạn mã CSS này, chúng ta chỉ cần khai báo khi bạn muốn giữ nguyên ảnh nền khi di chuyển thanh cuộn (tham khảo twitter)

background-image: url(bg.gif);
background-repeat: repeat-x;
background-attachment: fixed;

Short use way

Sau khi đã xác định các tính chất của lý lịch, thay vì công việc phải khai báo từng tính chất, bạn có thể khai báo các tính chất lý lịch của một thẻ HTML như sau

Mỗi ngôn ngữ trong thiết kế web hay lập trình web đều có những thuộc tính để sử dụng, trong bài viết này mình chia sẻ với các bạn những thuộc tính nền trong CSS. Các bạn cùng theo dõi nhé

Để xác định các hiệu ứng liên quan tới nền cho các phần tử trong HTML, bạn có thể sử dụng các thuộc tính nền trong CSS

• Thuộc tính background-color. Thuộc tính này được sử dụng để thiết lập màu nền của một phần tử
• Thuộc tính background-image. Thuộc tính này được sử dụng để thiết lập hình nền cho một phần tử
• Thuộc tính lặp lại nền. Thuộc tính này được sử dụng để điều khiển sự lặp lại của một hình ảnh nền theo chiều dọc hoặc chiều ngang
• Thuộc tính background-position. Thuộc tính này được sử dụng để điều khiển vị trí của một hình nền
• Thuộc tính background-attachment. Thuộc tính này được sử dụng để xác định xem có hay không một hình nền là cố định hoặc có thể cuộn với phần còn lại của trang
• Thuộc tính nền. sử dụng thuộc tính này nếu bạn muốn viết ít mã hơn mà vẫn xác định được tất cả các thuộc tính liên quan đến nền ở trên nền cho hình nền

Bảng dưới đây sẽ tóm tắt lại để bạn có thể dễ dàng nắm bắt hơn về các thuộc tính nền trong CSS

• 1 Ví dụ cụ thể cho từng thuộc tính
  • 1. 1 Thuộc tính màu nền (Thiết lập màu nền trong CSS)
  • 1. 2 Thuộc tính background-image (Thiết lập hình nền trong CSS)
  • 1. 3 Thuộc tính lặp lại nền (Lặp lại hình nền trong CSS)
  • 1. 4 Thuộc tính background-position (Thiết lập vị trí hình nền trong CSS)
  • 1. 5 Thuộc tính background-attachment (Thiết lập vị trí hình nền trong CSS)
  • 1. 6 Thuộc tính nền

Xem thêm.   Thiết kế web bằng Joomla độ tương thích cao, bảo mật tốt

Ví dụ cụ thể cho từng thuộc tính

Thuộc tính màu nền (Thiết lập màu nền trong CSS )

Để thiết lập màu nền trong CSS, bạn sử dụng thuộc tính background-color. Ví dụ sau minh họa cách thiết lập màu nền cho một phần tử trong CSS

Bạn có thể sử dụng tên màu, giá trị Mã Hex, giá trị Mã Hex ngắn hoặc thuộc tính rgb()

Thuộc tính background-image (Thiết lập hình nền trong CSS)

Để thiết lập màu nền trong CSS, bạn sử dụng thuộc tính background-image

Giá trị url ở đây xác định đường dẫn đến nơi bạn lưu giữ hình ảnh

Thuoc tính background-repeat (Lặp lại hình nền trong CSS)

Nếu bạn muốn hình nền của mình lặp lại theo chiều ngang hoặc theo chiều dọc, bạn có thể sử dụng thuộc tính lặp lại nền trong CSS. Thuộc tính này có các giá trị

• nói lại. default value. Hình nền sẽ được lặp lại theo cả chiều dọc và chiều ngang
• lặp lại-x. Hình nền sẽ chỉ được lặp lại theo chiều ngang
• lặp lại-y. Hình nền sẽ chỉ được lặp lại theo chiều dọc
• không lặp lại. Hình nền sẽ không được lặp lại

Theo mặc định, thuộc tính background-repeat sẽ có giá trị lặp lại

Cách kích hoạt hình nền theo chiều dọc bằng cách sử dụng giá trị lặp lại của thuộc tính màu nền

Cách lặp hình nền theo chiều ngang bằng cách sử dụng giá trị lặp lại của thuộc tính nền-màu

Thuộc tính background-position (Thiết lập vị trí hình nền trong CSS)

Để thiết lập vị trí cho hình nền, bạn sử dụng thuộc tính background-position trong CSS. Đơn vị thường được sử dụng để xác định giá trị cho thuộc tính nền-vị trí này là px

Xem thêm.   Thiết kế website trang sức, vàng bạc đá quý sang trọng, chuẩn SEO

Thuộc tính background-attachment (Thiết lập vị trí nền nền trong CSS)

Nếu bạn muốn thiết lập nền nền là cố định hoặc có thể cuộn đượ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à cố định và cuộn tương ứng

Thuộc tính nền

Thuộc tính nền. Có giá trị riêng lẻ hoặc tổng hợp các thuộc tính background-color, background-image, background-repeat, background-position, background-attachment