Khi viết mã trang web, việc sử dụng hình ảnh làm hình nền của trang web khác với việc chèn hình ảnh vào HTML bằng phần tử
body{
background-image: url['bg-image.jpg'];
}
8Để sử dụng một hình ảnh làm nền cho trang web của bạn, bạn sẽ sử dụng CSS
Đây là một ví dụ
Background Image
Background image
h1{
text-align: center;
}
Chúng tôi có hai khối mã ở trên — mã HTML hiển thị văn bản có nội dung "Hình nền" trên trang web trong khi mã CSS căn giữa văn bản trên trang
Để thêm hình nền vào trang web — hình bao phủ toàn bộ trang — bạn phải viết một số quy tắc CSS cho phần tử
body{
background-image: url['bg-image.jpg'];
}
9. Đây là cáchbody{
background-image: url['bg-image.jpg'];
}
Trong đoạn mã trên, chúng tôi đang sử dụng thuộc tính
h1{
text-align: center;
}
0 để thêm hình ảnh vào phần nội dung của trang web. Đường dẫn/vị trí của hình ảnh được chuyển vào dưới dạng tham số cho hàm h1{
text-align: center;
}
1. h1{
text-align: center;
}
0Đây là giao diện của trang web bây giờ
Nếu Hình nền Nhỏ hơn Cửa sổ Trình duyệt thì sao?
Trong trường hợp hình ảnh nhỏ hơn trình duyệt, hình ảnh được lặp lại vài lần để che đi khoảng trống còn lại
Sự lặp lại này trông không đẹp cho mọi bức ảnh. Đây là phiên bản nhỏ hơn của hình ảnh được sử dụng trong phần trước trông như thế nào trong trình duyệt
Hình ảnh đã được chia thành bốn phần không đồng đều. Trừ khi đây là hiệu ứng bạn đang tìm kiếm, bạn có thể sửa nó bằng thuộc tính
h1{
text-align: center;
}
1Đây là cách khắc phục sự cố lặp lại hình ảnh
body{
background-image: url['bg-image-small.jpg'];
background-repeat: no-repeat;
}
Trong đoạn mã trên, chúng tôi đã gán giá trị
h1{
text-align: center;
}
2 cho thuộc tính h1{
text-align: center;
}
1Đây là giao diện của trang web bây giờ
Hình ảnh không còn được lặp lại trên trang nhưng chúng tôi gặp sự cố mới — hình ảnh không còn bao phủ toàn bộ trang.
Để khắc phục điều đó, chúng tôi sử dụng các thuộc tính
h1{
text-align: center;
}
4 và h1{
text-align: center;
}
5h1{
text-align: center;
}
0Đặt giá trị của thuộc tính
h1{
text-align: center;
}
4 thành h1{
text-align: center;
}
7 làm cho hình ảnh bao phủ toàn bộ phần tử [trong trường hợp của chúng tôi là ____29/toàn bộ trang]Với giá trị
h1{
text-align: center;
}
9 của thuộc tính h1{
text-align: center;
}
5, vị trí của hình ảnh được cố định. Bằng cách này, nó vẫn ở cùng một vị trí ngay cả khi bạn cuộn qua trangĐây là hình ảnh bây giờ
Nhược điểm của việc kéo dài một hình ảnh nhỏ để che toàn bộ trang là hình ảnh sẽ giảm chất lượng và trở nên mờ khi được kéo dài. Trong trường hợp này, bạn nên cân nhắc trước khi sử dụng một hình ảnh nhỏ làm hình nền cho trang web của mình
Tóm lược
Trong bài viết này, chúng tôi đã nói về việc thêm hình nền vào trang web
Bạn có thể thêm hình nền vào trang web của mình bằng thuộc tính CSS
h1{
text-align: center;
}
0Chúng tôi cũng đã học cách sử dụng các thuộc tính nền CSS khác như
h1{
text-align: center;
}
1, h1{
text-align: center;
}
4 và h1{
text-align: center;
}
5Mã hóa vui vẻ
QUẢNG CÁO
QUẢNG CÁO
QUẢNG CÁO
Tiểu sử của tác giả này có thể được tìm thấy trong các bài viết của ông
Nếu bạn đọc đến đây, hãy tweet cho tác giả để cho họ thấy bạn quan tâm. Tweet một lời cảm ơn
Học cách viết mã miễn phí. Chương trình giảng dạy mã nguồn mở của freeCodeCamp đã giúp hơn 40.000 người có được việc làm với tư cách là nhà phát triển. Bắt đầu
Thêm ảnh nền trong HTML là một trong những công việc phổ biến nhất khi bạn làm Thiết Kế Web. Các gợi ý sau đây sẽ được đề cập trong bài viết này
Tiếp tục với bài viết này về Hình nền trong HTML
Hình Nền Trong HTML
Có nhiều cách khác nhau để hình ảnh có thể được thêm vào một trang web để làm cho nó trông bắt mắt và hấp dẫn. Một trong những cách như vậy là thêm hình nền. Trong blog này, chúng ta sẽ hiểu cách chúng ta có thể thêm hình nền vào trang web bằng HTML & CSS. Cách phổ biến và đơn giản nhất để thêm hình nền là sử dụng thuộc tính hình nền bên trong thẻ
Ví dụ
h1{
text-align: center;
}
8Thuộc tính nền mà chúng tôi đã chỉ định trong thẻ không được hỗ trợ trong HTML5. Sử dụng các thuộc tính CSS, chúng ta cũng có thể thêm hình nền vào trang web
Trước tiên chúng ta hãy hiểu cách chúng ta có thể thêm hình nền vào trang web bằng CSS. Sau đó, chúng ta sẽ xem xét các thuộc tính CSS khác nhau mà chúng ta có thể sử dụng để thay đổi giao diện của trang web
Thuộc tính hình nền CSS
Trong tất cả các ví dụ, chúng tôi sẽ xác định mã CSS bên trong
Nội dung tài liệu
Bạn cũng có thể tiếp tục và thêm hai hình nền cho phần tử
Ví dụ
h1{
text-align: center;
}
9ghi chú
Hình nền theo mặc định được thêm vào góc bên trái và được lặp lại theo cả hai cách, tôi. e. theo chiều ngang và chiều dọc
Lý do tại sao nên giữ màu nền là nếu hình ảnh không có sẵn, thì thuộc tính màu nền sẽ được sử dụng và màu tương tự sẽ được hiển thị
Bây giờ trước khi hiểu cách chúng ta có thể sử dụng các giá trị thuộc tính CSS khác nhau, hãy xem danh sách các giá trị thuộc tính CSS được liên kết với hình nền
- url. URL tới hình nền. Trong trường hợp có nhiều hình ảnh, cần cung cấp danh sách được phân tách bằng dấu phẩy
- độ dốc tuyến tính []. Đặt một gradient tuyến tính làm hình nền. Cần ít nhất 2 màu
- radial-gradient[]. Đặt độ dốc xuyên tâm làm hình nền. Cần ít nhất 2 màu
- lặp lại tuyến tính-gradient []. Lặp lại một gradient tuyến tính
- lặp lại-radial-gradient[]. Lặp lại một gradient xuyên tâm
- ban đầu. Đặt thuộc tính thành giá trị mặc định của nó
- thừa kế. Kế thừa thuộc tính này từ phần tử cha của nó
Tiếp tục với bài viết này về Hình nền trong HTML
Bây giờ, hãy thực hiện một số ví dụ để hiểu cách sử dụng các giá trị thuộc tính CSS
Bối cảnh Lặp lại
Ở đây chúng tôi đang cố gắng thêm một vài hình nền trong đó hình ảnh đầu tiên sẽ chỉ xuất hiện một lần và hình ảnh thứ hai sẽ được lặp lại. Chúng tôi đang sử dụng lặp lại nền để làm như vậy
body{
background-image: url['bg-image.jpg'];
}
0Tiếp tục với bài viết này về Hình nền trong HTML
Sử dụng lớp
Trong ví dụ này, chúng tôi đang tạo bg-image với các thuộc tính nền khác nhau như hình ảnh, màu sắc, vị trí và lặp lại. Chúng tôi đang nhắm mục tiêu lớp bg-image để áp dụng các thuộc tính nền cho trang web
body{
background-image: url['bg-image.jpg'];
}
1
Tiếp tục với bài viết này về Hình nền trong HTML
Độ dốc tuyến tính
Ở đây chúng ta đang tạo một linear-gradient sử dụng hai màu [i. e. đỏ & vàng] và đặt nó làm hình nền
body{
background-image: url['bg-image.jpg'];
}
2
Tiếp tục với bài viết này về Hình nền trong HTML
Chuyển màu 3 màu
Ở đây chúng ta đang tạo một linear-gradient sử dụng ba màu [i. e. đỏ, xanh dương & xanh lục] và đặt nó làm hình nền
body{
background-image: url['bg-image.jpg'];
}
3
Tiếp tục với bài viết này về Hình nền trong HTML
Lặp lại Gradient tuyến tính
Trong ví dụ này, chúng tôi đang lặp lại gradient tuyến tính bằng cách sử dụng các hàm repeat-linear-gradient[] và đặt nó làm hình nền
body{
background-image: url['bg-image.jpg'];
}
4
Tiếp tục với bài viết này về Hình nền trong HTML
Độ dốc xuyên tâm
Ở đây chúng ta đang tạo một radial-gradient sử dụng hai màu [i. e. đỏ & vàng] và đặt nó làm hình nền
body{
background-image: url['bg-image.jpg'];
}
3Gradient xuyên tâm 3 màu
Ở đây chúng ta đang tạo một radial-gradient sử dụng ba màu [i. e. đỏ, xanh dương & xanh lục] và đặt nó làm hình nền
body{
background-image: url['bg-image.jpg'];
}
3
Tiếp tục với bài viết này về Hình nền trong HTML
Lặp lại Radial Gradient
Trong ví dụ này, chúng tôi đang lặp lại gradient xuyên tâm bằng cách sử dụng các hàm repeat-radial-gradient[] và đặt nó làm hình nền
body{
background-image: url['bg-image.jpg'];
}
3
Bây giờ sau khi thực hiện đoạn mã trên, bạn sẽ hiểu cách chèn hình nền vào trang web bằng HTML & CSS. Tôi hy vọng blog này là thông tin và giá trị gia tăng cho bạn. Với điều này, chúng tôi đi đến phần cuối của bài viết này
Hãy xem Chương trình Thạc sĩ Nhà phát triển web Full Stack 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 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?