CSS là từ viết tắt của Cascading Style Sheets. Nó là một ngôn ngữ thiết kế đơn giản nhưng mạnh mẽ có khả năng chuyển đổi các trang web. Nói một cách dễ hiểu, nó sắp xếp hợp lý quá trình làm cho các trang web trở nên hiển thị và thu hút người dùng với sự trợ giúp của . Trong bài viết này, chúng ta sẽ hiểu cách triển khai các hình nền khác nhau trong CSS theo thứ tự sau:
- Hình nền trong Thuộc tính CSS
- Hình nền trong CSS
- Bối cảnh Lặp lại
- Tệp đính kèm nền
- Vị trí nền
- Hình nền ở kích thước CSS
- Màu nền
Hình nền trong Thuộc tính CSS
Có nhiều thuộc tính được sử dụng để kiểm soát các hành vi và vị trí của hình ảnh. Các thuộc tính này là:
- hình nền
- Bối cảnh Lặp lại
- nền-tệp đính kèm
- nền-vị trí
- kích thước nền
- màu nền
Chúng ta sẽ làm quen với từng thuộc tính này và xem khi nào và cách sử dụng chúng với một số trình diễn thú vị.
Hình nền trong CSS
Các hình nền thuộc tính như tên cho thấy chỉ được sử dụng để chỉ ra và thiết lập hình nền thông qua một phần tử trong trang web. Theo mặc định, hình nền được đặt ở góc trên cùng bên trái của một phần tử.
cú pháp: background-image: url | none | linear-gradient | radial-gradient
nội dung {background-image: url ('apple.jpg')}nền sử dụng url
Hãy hiểu các thông số:
- url: Đầu vào cho tham số này cho phép chúng tôi chỉ định đường dẫn tệp đến bất kỳ hình ảnh nào hoặc URL của hình ảnh cần được đặt làm nền. Để khai báo nhiều hình ảnh, các Url được phân tách bằng dấu phân cách bằng dấu phẩy.
nội dung {background-image: url ('apple.jpg')} 
công nghệ mới nhất trong trí tuệ nhân tạo
- không ai: Đây là giá trị mặc định của thuộc tính và không có hình nền nào được hiển thị nếu giá trị của nó được chỉ định.
nội dung {background: none}- tuyến tính-gradient (): Hình nền được đặt thành gradient tuyến tính. Cần chỉ định tối thiểu hai màu cho thuộc tính này, tức là từ trên xuống dưới.
body {background-color: # 001 background-image: linear-gradient (trắng 15%, trong suốt 16%), linear-gradient (trắng 15%, trong suốt 16%) background-size: 60px 60px background-position: 0 0, 30px 30px}- radial-gradient (): Hình nền được đặt thành gradient xuyên tâm. Cần chỉ định tối thiểu hai màu cho thuộc tính này, tức là cho từ giữa đến các cạnh.
body {background-color: # 001 background-image: radial-gradient (trắng 15%, trong suốt 16%), radial-gradient (trắng 15%, trong suốt 16%) background-size: 60px background-position: 0 0, 60px, 30px 30px}- lặp lại-tuyến tính-gradient (): Nó lặp lại một gradient tuyến tính. Chúng ta hãy sử dụng cùng một ví dụ mà chúng ta đã thấy ở trên trong gradient tuyến tính cho lặp lại-tuyến tính-gradient và xem sự khác biệt.
body {background-color: # 001 background-image: repeat-linear-gradient (trắng 15%, trong suốt 16%), lặp lại-tuyến tính-gradient (trắng 15%, trong suốt 16%) background-size: 60px background-position 60px : 0 0, 30px 30px}- repeat-radial-gradient (): Nó lặp lại một gradient xuyên tâm. Hãy cùng chúng tôi khám phá ví dụ tương tự mà chúng tôi đã sử dụng ở trên trong một gradient xuyên tâm.
body {background-color: # 001 background-image: repeat-radial-gradient (trắng 15%, trong suốt 16%), repeat-radial-gradient (trắng 15%, trong suốt 16%) background-size: 60px background-position 60px 60px : 0 0, 30px 30px}Nền dự phòng
Một mẹo chuyên nghiệp luôn được khuyến khích là thêm màu nền làm tùy chọn dự phòng. Nó có tác dụng giải cứu đặc biệt khi hình nền không tải hoặc nền gradient mà chúng tôi đặt trong khi phát triển không được hỗ trợ bởi một số trình duyệt cũ mà nó được xem trên đó.
Điều này không làm hỏng trải nghiệm người dùng và có thể được khai báo như thế này:
nội dung {background: url (apple_lost.jpg) màu hồng}Nhiều nền
Chúng tôi cũng có một tùy chọn để đặt nhiều hình nền và nó được yêu cầu trong hầu hết các trường hợp như hình nền trước và hình nền. Thứ tự của hình ảnh là quan trọng ở đây, hình ảnh phải ở phía trước được khai báo trước và hình ảnh ở phía sau cuối cùng được khai báo tiếp theo.
Dưới đây là ví dụ cho nhiều hình nền:
nội dung {background-image: url ('small-heart.jpg'), url ('background.jpg')}Bối cảnh Lặp lại
Thuộc tính background-repeat được sử dụng cùng với background-image để xác định hành vi lặp lại của hình ảnh. Nó chỉ định liệu và cách thức một hình nền sẽ được lặp lại. Hình nền theo mặc định được lặp lại theo cả chiều dọc và chiều ngang.
Các giá trị có thể là:
- lặp lại- Hình ảnh lặp lại theo cả chiều ngang và chiều dọc
- không lặp lại - Hình ảnh không lặp lại
- repeat-x - Hình ảnh được lặp lại theo chiều ngang
- repeat-y - Hình ảnh được lặp lại theo chiều dọc
- khoảng trắng- Hình ảnh được lặp lại với các khoảng trắng hoặc khoảng trống chẵn giữa.
- tròn - Hình ảnh được lặp lại để lấp đầy khu vực mà không có bất kỳ khoảng trống nào giữa chúng.
Cú pháp CSS cho thuộc tính background-repeat là:
Bối cảnh Lặp lại: lặp lại | lặp lại-x | lặp lại-y | không lặp lại | dấu cách | vòng
nội dung {background-image: url ('heart.png'), url ('background.png') background-repeat: repeat-y, repeat-x background-color: #ffffff}Tệp đính kèm nền
Các nền-tệp đính kèm thuộc tính được sử dụng cùng với background-image để cho biết hình ảnh có nên cuộn khi nội dung được cuộn hay không. Nó biểu thị rằng hình nền cần được sửa hoặc nên cuộn cùng với tài liệu liên quan đến chế độ xem cửa sổ trình duyệt. Giá trị mặc định là cuộn.
Các giá trị có thể là:
- cuộn - Hình ảnh cuộn cùng với trang.
- đã sửa - Hình ảnh sẽ không cuộn theo trang
Cú pháp CSS cho phần đính kèm nền là:
background-đính kèm: cuộn | cố định
body {background-image: url ('heart.png'), url ('background.png') background-repeat: space, round}Vị trí nền
Các nền-vị trí thuộc tính được sử dụng để biểu thị vị trí hoặc vị trí của hình nền. Các giá trị có thể là:
- hàng đầu
- đúng
- đáy
- trái
- trung tâm
- kết hợp của các giá trị này (ví dụ: trên cùng bên trái)
Cú pháp CSS cho vị trí nền là:
background-position: trên cùng | phải | trái | dưới cùng | giữa
body {background-image: url ('heart.png') background-repeat: no-repeat background-attachment: scroll}Hình nền ở kích thước CSS
Thuộc tính này là một trong những thuộc tính hữu ích nhất vì nó cho phép chúng ta kiểm soát kích thước của hình nền. Có nhiều cách kết hợp khác nhau mà chúng tôi có thể sử dụng với thuộc tính này và nhận được kết quả tương ứng. Giá trị mặc định là tự động.
Các giá trị sau có thể được sử dụng với kích thước nền:
- Tự động
- chiều dài - chiều cao và chiều rộng của hình ảnh, ví dụ: 20px 40px.
- phần trăm- chiều cao và chiều rộng của hình ảnh dưới dạng phần tử mẹ phần trăm w.r.t, ví dụ: 50% 50%.
- center- Căn chỉnh hình ảnh cho chính giữa
- che, chia tỷ lệ hình ảnh để bao phủ hoàn toàn bởi khu vực nền.
- chứa, chia tỷ lệ hình ảnh để vừa với chiều cao và chiều rộng thực của nó.
Cú pháp CSS cho vị trí nền là:
kích thước nền: giá trị
body {background-image: url ('heart.png'), url ('background.png') background-repeat: no-repeat, repeat background-size: 400px 150px, cover}body {background-image: url ('heart.png'), url ('background.png') background-repeat: no-repeat, repeat background-size: contains, 400px 150px}Màu nền
Đây là thuộc tính đơn giản nhất trong số các thuộc tính trong CSS được áp dụng. Nó áp dụng các màu đồng nhất cho nền của trang. Giá trị cho thuộc tính này có thể được chỉ định bằng màu sắc (ví dụ: đỏ, xanh lam, v.v.), giá trị hex và giá trị RGB.
Cú pháp CSS cho màu nền là:
màu nền: giá trị
nội dung {background-image: url (small-heart.jpg) background-color: # 22a8e3}python __init__ method
Điều này kết thúc tất cả các thuộc tính mà chúng ta có thể sử dụng với nền. Chúng tôi luôn có thể thử các kết hợp khác nhau của các thuộc tính như chúng tôi đã thấy trong phần trình diễn của mình.
CSS là cần thiết và phải có kỹ năng cho mọi nhà phát triển web front-end. Nó giúp trong khi thiết kế và tạo kiểu nền cũng như xây dựng các trang web ấn tượng và làm phong phú trải nghiệm người dùng. Cách tốt nhất là tiếp tục thử nghiệm và tận dụng tối đa công nghệ giao diện người dùng đặc biệt này vì nó có thể làm nên điều kỳ diệu và chuyển đổi trang một cách linh hoạt.
Kiểm tra của chúng tôi đi kèm với đào tạo trực tiếp do người hướng dẫn và trải nghiệm dự án thực tế. Khóa đào tạo này giúp bạn thành thạo các kỹ năng làm việc với công nghệ web back-end và front-end. Nó bao gồm đào tạo về Phát triển Web, jQuery, Angular, NodeJS, ExpressJS và MongoDB.
Có một câu hỏi cho chúng tôi? Vui lòng đề cập đến nó trong phần nhận xét của blog “Hình nền trong CSS” và chúng tôi sẽ liên hệ lại với bạn.