Nền CSS so với nền-màu

, sau đó thêm tiêu đề và đoạn văn.

HTML

< div >

< h1 > LinuxHint < / h1 >

< P > Chào mừng đén với website của chúng tôi < / P >

< / div >

Trong CSS, chúng tôi sẽ điều chỉnh chiều cao của div là “ 100% ”Để làm cho nó xuất hiện trên toàn bộ trang và kích thước phông chữ của văn bản là“ xx-lớn ”. Sau đó, đặt màu nền là “ nước biển ”.

CSS

div {

Chiều cao : 100% ;

cỡ chữ : xx-lớn ;

màu nền : nước biển ;

}

Trong hình ảnh được cung cấp bên dưới, bạn có thể thấy rằng màu nền được áp dụng:

Thuộc tính hình ảnh nền CSS

Các ' hình nền Thuộc tính ”được sử dụng để đặt một hoặc nhiều hình ảnh làm nền của các phần tử HTML. Bạn có thể sử dụng thuộc tính này để thêm các hình nền khác nhau cho các phần tử khác nhau.

Cú pháp

Cú pháp của thuộc tính background-image là:

background-image: url ()

Tại đây, cung cấp đường dẫn của hình ảnh bạn muốn đặt làm nền làm đối số cho “ url () ”.

Thí dụ

Tiếp theo ví dụ trước, hãy thêm hình nền trong “ div ' lớp. Chúng tôi sẽ thêm url của hình ảnh là “ url (img.jpg) ”:

div {

...

hình nền : url ( img.jpg ) ;

}

Đầu ra được cung cấp bên dưới cho biết rằng hình nền đã được thêm thành công:

Lưu ý rằng hình ảnh được lặp lại. Để giải quyết vấn đề này, hãy kiểm tra thuộc tính tiếp theo.

Thuộc tính lặp lại nền CSS

Khi bạn thêm một hình ảnh làm nền trên một trang web, nó sẽ được lặp lại theo mặc định. Để tránh sự lặp lại này và thiết lập mẫu theo sự lựa chọn của bạn, ' Bối cảnh Lặp lại ”Tài sản được sử dụng.

Cú pháp

Cú pháp của thuộc tính background-repeat là:

Bối cảnh Lặp lại : nói lại | lặp lại-x | lặp lại y | không lặp lại

Dưới đây là mô tả các giá trị đã nêu của thuộc tính lặp lại nền:

• nói lại: Nó được sử dụng để lặp lại hình ảnh theo cả hai hướng, dọc và ngang.
• lặp lại-x: Nó được sử dụng để thiết lập sự lặp lại của hình ảnh chỉ theo chiều ngang.
• lặp lại-y: Nó chỉ định sự lặp lại theo chiều dọc của hình ảnh.
• không lặp lại: Nó được sử dụng để tránh sự lặp lại của hình ảnh.

Thí dụ

Ở đây, chúng tôi sẽ đặt giá trị của thuộc tính background-repeat là “ không lặp lại ”:

div {

...

Bối cảnh Lặp lại : không lặp lại ;

}

Kết quả của đoạn mã được cung cấp ở trên được đưa ra dưới đây. Bạn có thể thấy rằng hình ảnh không bị lặp lại nữa:

Thuộc tính vị trí nền CSS

Để đặt vị trí của hình nền, hãy nhấn “ nền-vị trí ”Tài sản được sử dụng. Nó cho phép bạn điều chỉnh hình ảnh ở các vị trí khác nhau như trên cùng bên trái, chính giữa bên trái, dưới cùng bên trái, trên cùng bên phải, chính giữa bên phải và nhiều hơn nữa.

Cú pháp

Cú pháp của thuộc tính background-position là:

nền-vị trí : giá trị

Thay cho “ giá trị ”, Bạn có thể chỉ định vị trí của hình ảnh.

Thí dụ

Ở đây, chúng tôi sẽ đặt vị trí nền là “ trung tâm ”:

div {

...

nền-vị trí : trung tâm ;

}

Trong đầu ra bên dưới, hình ảnh xuất hiện ở giữa trang:

Thuộc tính kích thước nền CSS

Để đặt kích thước của hình nền, ' kích thước nền ”Tài sản được sử dụng.

Cú pháp

Kích thước nền có cú pháp sau:

kích thước nền : chiều dài | bìa

Sau đây là mô tả về các giá trị của thuộc tính background-size:

• chiều dài: Nó được sử dụng để cố định chiều rộng và chiều cao của hình nền.
• trải ra: Nó được sử dụng để điều chỉnh hình ảnh nền trong toàn bộ nền.

Thí dụ

Chúng tôi sẽ đặt kích thước của nền là “ 100% 'Chiều cao và' 80% ' bề rộng:

div {

...

kích thước nền : 100% 80% ;

}

Bạn có thể thấy rằng hình ảnh đã được thay đổi kích thước dựa trên các kích thước được chỉ định:

Thuộc tính background-origin CSS

Các ' nền-nguồn gốc ”Thuộc tính được sử dụng để điều chỉnh vùng định vị của hình nền. Hình ảnh được điều chỉnh ở góc trên bên trái theo mặc định.

Cú pháp

Cú pháp của thuộc tính background-origin là:

nền-nguồn gốc : hộp đệm | hộp viền | hộp nội dung

Các giá trị của thuộc tính background-origin được mô tả bên dưới:

• hộp đệm: Đây là giá trị mặc định của thuộc tính gốc nền được sử dụng để điều chỉnh vị trí của hình nền theo cạnh đệm.
• hộp viền: Nó được sử dụng để thiết lập hình ảnh theo hộp đường viền của hình ảnh.
• hộp nội dung: Nó được sử dụng để thiết lập hình nền phù hợp với nội dung của hình ảnh.

Ghi chú: Thuộc tính background-origin không hoạt động nếu giá trị của thuộc tính background-attachment được đặt là “ đã sửa ”.

Thí dụ

Đầu tiên, tạo một đường viền xung quanh vùng chứa. Ở đây, chúng tôi sẽ tiếp tục ví dụ trước đó và đặt giá trị đệm là “ 10px ”. Sau đó, điều chỉnh chiều rộng đường viền là “ 15px ”, Phong cách là“ cây rơm ”Và tô màu là“ rgb (1, 68, 68) ”. Cuối cùng, chúng tôi sẽ chỉ định giá trị của thuộc tính gốc nền là “ hộp nội dung ”:

div {

...

đệm lót : 10px ;

biên giới : 15px cây rơm rgb ( 1 , 68 , 68 ) ;

nền-nguồn gốc : hộp nội dung ;

}

Kết quả của mã được cung cấp ở trên được đưa ra dưới đây. Bạn có thể thấy rằng vị trí của hình ảnh được đặt theo nội dung của div:

Thuộc tính nền-clip CSS

Các ' nền-clip ”Thuộc tính hoạt động trên màu nền của phần tử. Nó cho phép bạn kiểm soát mức độ trải dài của màu nền bên ngoài một phần tử, chẳng hạn như phần đệm, đường viền của phần tử và nội dung của phần tử đó.

Cú pháp

Cú pháp của thuộc tính background-clip là:

nền-nguồn gốc : hộp viền | hộp đệm | hộp nội dung

Các giá trị của thuộc tính background-origin được mô tả bên dưới:

• hộp viền: Đây là giá trị mặc định của thuộc tính background-origin được sử dụng để đặt màu nền phía sau đường viền.
• hộp đệm: Nó được sử dụng để điều chỉnh màu trong hộp đệm của phần tử.
• hộp nội dung: Nó được sử dụng để thiết lập màu nền theo nội dung của phần tử.

Thí dụ

Chúng tôi sẽ tiếp tục ví dụ trước đó và thay đổi giá trị của kiểu đường viền thành “ say mê ”Để hiểu thuộc tính background-clip. Sau đó, chúng tôi sẽ đặt giá trị của thuộc tính background-clip là “ hộp đệm ”:

div {

...

nền-clip : hộp đệm ;

}

Kết quả đầu ra cho biết màu nền trắng đang hiển thị khi cạnh viền kết thúc:

Thuộc tính tệp đính kèm nền CSS

Các ' nền-tệp đính kèm Thuộc tính ”được sử dụng để điều chỉnh hành vi hoặc hình ảnh trong khi cuộn trang. Hành vi của nó có thể được thiết lập cuộn với các phần tử khác hoặc cố định.

Cú pháp

Cú pháp của thuộc tính background-attachment là:

nền-tệp đính kèm : giá trị

Bạn có thể đặt giá trị của phần đính kèm nền là “ đã sửa ”Để sửa hình nền hoặc“ cuộn giấy ”Để cho phép hình ảnh cuộn cùng trang.

Ghi chú: Theo mặc định, giá trị của thuộc tính tệp đính kèm nền được đặt là “ cuộn giấy ”.

Có thể thấy rằng ảnh nền được thêm vào không phải là ảnh tĩnh khi chúng ta đã cuộn. Bây giờ chúng ta hãy khắc phục sự cố này.

Để làm như vậy, chúng tôi đặt giá trị của thuộc tính tệp đính kèm nền là “ đã sửa ”:

div {

...

nền-tệp đính kèm : đã sửa ;

}

Đây là kết quả chứng minh rằng hình ảnh đã được sửa:

Bây giờ, hãy hướng tới sự so sánh giữa các thuộc tính nền và màu nền.

Nền CSS so với nền-màu

Bảng đã cho sẽ phân biệt các thuộc tính nền và màu nền trên cơ sở các đặc điểm của chúng:

Đặc trưng	Nền CSS	Màu nền CSS
Loại hình	Nó là một tài sản siêu.	Nó là một thuộc tính phụ của thuộc tính nền.
Chức năng	Nó thiết lập tất cả các thuộc tính nền.	Nó chỉ đặt màu nền.
Phạm vi	Nó hỗ trợ tất cả các thuộc tính nền	Nó chỉ hỗ trợ thuộc tính màu nền
Mức độ	Khi bạn cần thêm nhiều giá trị của nền, nó rất dễ sử dụng. Bạn có thể đặt các giá trị của tất cả các thuộc tính nền cùng một lúc.	Nó có thể được sử dụng khi bạn chỉ cần thêm một màu nền duy nhất.
Cú pháp	background: giá trị (Các giá trị là bg-color, bg-image và các thuộc tính khác)	background-color: màu sắc

Nó đã được giải thích các thuộc tính màu nền khác với các thuộc tính nền như thế nào.

Sự kết luận

CSS “ lai lịch ”Thuộc tính là một thuộc tính viết tắt được sử dụng để đặt nhiều giá trị nền cùng một lúc, chẳng hạn như màu sắc, hình ảnh, vị trí, kích thước, nguồn gốc và hơn thế nữa. Mặt khác, ' màu nền ”Chỉ được sử dụng để thêm màu vào nền. Trong hướng dẫn này, chúng ta đã thảo luận về sự khác biệt giữa thuộc tính nền CSS và thuộc tính màu nền CSS.