Trang web làm tổ: làm thế nào để làm cho hình ảnh nền html

Nhiều nhà thiết kế web mới làm quen, chỉ để đi sâu vào bản chất của việc tạo ra các trang web, thường tự hỏi làm thế nào để làm hình nền html. Và nếu một số trong số họ có thể đối phó với vấn đề này, nó vẫn là một vấn đề tại thời điểm kéo dài toàn bộ chiều rộng của hình ảnh trên màn hình. Đồng thời tôi muốn thấy các trang web được hiển thị giống nhau trên tất cả các trình duyệt, vì vậy nó cần thỏa mãn các yêu cầu của qua trình duyệt. Bạn có thể đặt nền theo hai cách: bằng cách sử dụng các thẻ HTML và CSS. Mỗi cho mình chọn lựa chọn tốt nhất. Tất nhiên, phong cách CSS là thuận tiện hơn nhiều, bởi vì mã của nó được lưu trữ trong một tập tin riêng biệt và không mất loa thêm trong thẻ trang web chính của, nhưng trước tiên chúng ta hãy xem xét một phương pháp đơn giản để cài đặt hình ảnh trên nền của trang web.

thẻ HTML cơ bản để tạo nền

Vì vậy, chúng tôi đi đến vấn đề làm thế nào để làm cho hình ảnh nền trong html trên màn hình. Để tìm kiếm trang web đẹp, bạn phải hiểu một chi tiết khá quan trọng: nó là đủ chỉ để thực hiện một nền gradient hoặc sơn nó một màu cố định, nhưng nếu bạn cần để chèn hình nền, nó sẽ không kéo dài toàn bộ chiều rộng của màn hình. Những hình ảnh ban đầu cần thiết để chọn lên hoặc làm cho thiết kế của riêng bạn với phần mở rộng này, trong đó bạn sẽ hiển thị trang của trang web. Chỉ khi hình nền sẵn sàng, kéo nó vào một thư mục có tên «Hình ảnh». Trong đó, chúng tôi sẽ lưu trữ tất cả những hình ảnh đã qua sử dụng, hình ảnh động và các file đồ họa khác. Thư mục này nên được đặt trong thư mục gốc với tất cả các file html của bạn. Bây giờ bạn có thể di chuyển trên và mã. Có một số tùy chọn cho việc viết code, do đó nền sẽ thay đổi hình ảnh.

1. Viết thuộc tính thẻ.
2. Thông qua phong cách CSS trong mã HTML.
3. Viết kiểu CSS trong một file riêng biệt.

Như trong HTML để làm hình nền, bạn quyết định, nhưng tôi muốn nói một vài lời về nó như thế nào sẽ là tối ưu nhất. Phương pháp đầu tiên là bằng cách viết thông qua một thuộc tính thẻ từ lâu đã trở nên lỗi thời. Lựa chọn thứ hai được sử dụng rất hiếm khi, bởi vì nó chỉ ra rằng rất nhiều các mã tương tự. Một lựa chọn thứ ba là phổ biến nhất và hiệu quả. Dưới đây là ví dụ về các thẻ HTML:

1. Phương pháp thu âm đầu tiên thông qua thuộc tính tag (cơ thể) trong tập tin index.htm. Nó được lưu trữ ở dạng này: (body background = "FOLDER_NAME / Nazvanie_kartinki.rasshirenie") (/ body). Đó là, nếu chúng ta có một bức tranh với tựa đề «Ảnh» và mở rộng JPG, và thư mục chúng tôi đặt tên «Hình ảnh», sau đó mục HTML-mã sẽ trông như thế này: (body background = "Images / Picture.jpg") ... (/ body) .
2. Phương pháp thứ hai liên quan đến việc ghi một phong cách CSS, nhưng nó được viết trong cùng một tập tin với tên index.htm. (Body style = "background: url ( 'hình ảnh ../ / Picture.jpg')").
3. Phương pháp thứ ba ghi được thực hiện trong hai tập tin. Các tài liệu với thẻ tên index.htm (head) được viết một dòng như vậy: (đầu) (link rel = "stylesheet" type = "text / css" href = "http: // site / bài viết / 193.110 /% D0% 9F % D1% 83% D1% 82% D1% 8C_% D0% BA CSS_faylu ") (/ head). Một tập tin được gọi là phong cách style.css đã viết: body {background: url (hình ảnh / Picture.jpg ')}.

Như trong HTML để làm hình nền, chúng tôi hiểu. Bây giờ bạn cần phải tìm ra cách để kéo dãn hình ảnh theo chiều ngang của toàn bộ màn hình.

Cách để kéo dãn hình nền với độ rộng của cửa sổ

Chúng tôi đại diện cho màn hình của chúng tôi dưới dạng phần trăm. Nó chỉ ra rằng toàn bộ chiều rộng và chiều dài của màn hình sẽ là 100% x 100%. Chúng ta cần phải căng hình ảnh với chiều rộng này. Thêm vào các tập tin hình ảnh dòng ghi style.css mà sẽ kéo dài hình ảnh trên toàn bộ chiều rộng và chiều dài của màn hình. Vì nó được viết bằng phong cách CSS? Rất đơn giản!

thân thể

{

background: url (hình ảnh / Picture.jpg ')

nền-size: 100%; / * Bài đăng này là phù hợp cho hầu hết các trình duyệt hiện đại * /

}

Vì vậy, chúng tôi đã tìm ra cách để tạo ra một nền hình ảnh trong html trên màn hình. Ngoài ra còn có một phương pháp ghi nhận trong file index.htm. Mặc dù phương pháp này và lỗi thời, nhưng đối với người mới bắt đầu cần phải biết và hiểu được. Thẻ (đầu) (phong cách) div {background-size: bìa; } (/ Phong cách) (/ head), kỷ lục này có nghĩa là chúng tôi phân bổ một đơn vị đặc biệt cho nền, mà sẽ được bố trí trên toàn bộ chiều rộng của cửa sổ. Chúng tôi đã xem xét hai cách, làm thế nào để làm cho một trang web html hình nền, do đó hình ảnh được kéo dài đến toàn bộ chiều rộng của màn hình trong bất kỳ trình duyệt hiện đại.

Làm thế nào để tạo ra một nền cố định

Nếu bạn quyết định sử dụng một hình ảnh làm hình nền của tài nguyên web trong tương lai, sau đó bạn chỉ cần phải biết làm thế nào để làm cho nó cố định, do đó nó không được kéo dài trong thời gian và không làm hỏng sự xuất hiện thẩm mỹ. Đơn giản chỉ cần bằng cách sử dụng mã HTML để đăng ký một bổ sung nhỏ. Bạn cần phải nộp style.css để thêm một cụm từ sau background: url (hình ảnh / Picture.jpg ') cố định; hoặc thay vì thêm vào sau khi chấm phẩy dòng riêng biệt - position: fixed. Do đó, giấy dán tường của bạn sẽ được cố định. Trong di chuyển nội dung trên trang web, bạn sẽ thấy rằng văn bản dòng đang di chuyển, nhưng nền vẫn còn tại chỗ. Vì vậy, bạn học được cách để làm hình nền html, bằng nhiều cách.

Làm việc với bảng trong HTML

Nhiều nhà phát triển web thiếu kinh nghiệm, phải đối mặt với các bảng và các khối, thường không hiểu làm thế nào để làm cho bảng nền hình ảnh html. Giống như tất cả các đội HTML phong cách và CSS, ngôn ngữ lập trình web là khá đơn giản. Và giải pháp cho vấn đề này là để viết một cặp dòng mã. Bạn nên đã biết rằng viết một bảng các hàng và cột, tương ứng, như được chỉ ra bởi các thẻ (tr) và (td). Để làm cho nền của bảng dưới hình thức một hình ảnh, nó là cần thiết để thêm vào các thẻ (bảng), (tr) hoặc (td) một cụm từ đơn giản với tham chiếu đến các hình ảnh tham khảo: background = hình ảnh URL. Để rõ ràng, chúng tôi đưa ra một vài ví dụ.

Bảng với một hình ảnh thay vì nền: HTML ví dụ

Vẽ một bảng 2x3 và làm cho nó hình nền được lưu trữ trong thư mục "Images": (nền bảng = "Images / Picture.jpg") (tr) (td) 1 (/ td) (td) 2 (/ td) (td) 3) (/ td) (/ tr) (tr) (td) 4 (/ td) (td) 5 (/ td) (td) 6 (/ td) (/ tr) (/ table). Vì vậy, bảng của chúng tôi sẽ được rút ra trong bối cảnh của bức tranh.

Bây giờ vẽ các kích thước tấm cùng của 2x3, nhưng chèn một hình ảnh trong các cột được đánh số 1, 4, 5 và 6. (bảng) (tr) (nền td = "Images / Picture.jpg") 1 (/ td) (td) 2 (/ td) (td) 3 (/ td) (/ tr) (tr) (td background = "Images / Picture.jpg") 4 (/ td) (td background = "Images / Picture.jpg") 5 ( / td) (nền td = "Images / Picture.jpg") 6 (/ td) (/ tr) (/ table). Sau khi xem chúng ta có thể thấy rằng nền chỉ xuất hiện trong những tế bào mà chúng ta đã đăng ký, và không phải là toàn bộ bảng.

trang web tương thích qua trình duyệt

Có một điều như một qua trình duyệt tương thích nguồn web. Điều này có nghĩa rằng trang web của bạn được tốt như nhau được hiển thị trong các loại khác nhau và các phiên bản của trình duyệt. Nó phải là mã HTML và CSS phong cách để tùy chỉnh một trình duyệt cần thiết. Hơn nữa, trong thời đại hiện đại của điện thoại thông minh, nhiều nhà phát triển web đang cố gắng để tạo ra các trang web và điều chỉnh cho phiên bản di động và một cái nhìn máy tính.