Nền trang HTML5. Cách đặt màu nền trong HTML. Các cách kéo dài hình nền theo chiều rộng của cửa sổ
- Các trình duyệt khác nhau triển khai chức năng chuyển màu theo cách khác nhau, vì vậy bạn cần thêm nhiều phiên bản mã.
-
Tạo một gradient định hướng. Nếu bạn không muốn dải màu chạy theo chiều dọc, hãy chỉ định hướng mà màu sẽ nhạt dần. Để thực hiện việc này, hãy nhập mã sau vào giữa các thẻ :
html (chiều cao tối thiểu: 100%;) nội dung (nền: -webkit- gradient-tuyến tính (trái, #93B874, #C9DCB9); nền: -o- gradient-tuyến tính (phải, #93B874, #C9DCB9); nền: -moz- gradient tuyến tính (phải , #93B874 , #C9DCB9 ); nền : gradient tuyến tính (sang phải , #93B874 , #C9DCB9 ); màu nền : #93B874 ; )
- Nếu bạn thích, hãy sắp xếp lại các từ "trái" và "phải" để thử nghiệm các hướng chuyển màu khác nhau.
-
Sử dụng các thuộc tính khác để tùy chỉnh độ dốc. Bạn có thể làm được nhiều điều với nó hơn bạn nghĩ.
- Ví dụ: sau mỗi màu bạn có thể nhập số phần trăm. Điều này sẽ cho biết mỗi phân đoạn màu sẽ chiếm bao nhiêu không gian. Đây là một mã ví dụ với các tham số sau:
nền: gradient tuyến tính (#93B874 10%, #C9DCB9 70%, #000000 90%);
- Thêm độ trong suốt cho màu sắc. Trong trường hợp này, nó sẽ mờ dần. Để đạt được hiệu ứng mờ dần, hãy sử dụng cùng một màu. Để đặt màu, bạn cần hàm rgba(). Giá trị cuối cùng sẽ quyết định độ trong suốt: 0 là màu đục và 1 là màu trong suốt.
nền : gradient tuyến tính (sang phải , rgba ( 147 , 184 , 116 , 0 ), rgba ( 147 , 184 , 116 , 1 ));
- Ví dụ: sau mỗi màu bạn có thể nhập số phần trăm. Điều này sẽ cho biết mỗi phân đoạn màu sẽ chiếm bao nhiêu không gian. Đây là một mã ví dụ với các tham số sau:
Tìm tiêu đề "html". Nó phải ở đầu tài liệu.
Hãy nhớ cú pháp cơ bản cho quá trình này.Để tạo gradient, bạn cần biết hai đại lượng: điểm/góc bắt đầu và dải màu sẽ mờ dần vào nhau. Bạn có thể chọn nhiều màu để chúng hòa vào nhau; Bạn cũng có thể đặt hướng hoặc góc của quá trình chuyển đổi.
nền: gradient tuyến tính (hướng/góc, color1, color2, color3, v.v.);
Tạo một gradient dọc. Nếu bạn không chỉ định hướng, độ dốc sẽ đi từ trên xuống dưới. Để tạo một dải màu như vậy, hãy nhập mã sau vào giữa các thẻ :
html (chiều cao tối thiểu: 100%;) nội dung (nền: -webkit- tuyến tính-gradient (#93B874, #C9DCB9); nền: -o- tuyến tính-gradient (#93B874, #C9DCB9); nền: -moz- tuyến tính -gradient (#93B874 , #C9DCB9 ); nền : gradient tuyến tính (#93B874 , #C9DCB9 ); màu nền : #93B874 ; )
Xem lại mã. Mã để tạo dải màu làm nền trang web sẽ trông giống như thế này:
< html > < head > < style >html (chiều cao tối thiểu: 100%;) nội dung (nền: -webkit- gradient-tuyến tính (trái, #93B874, #C9DCB9); nền: -o- gradient-tuyến tính (phải, #93B874, #C9DCB9); nền: -moz- gradient tuyến tính (phải , #93B874 , #C9DCB9 ); nền : gradient tuyến tính (sang phải , #93B874 , #C9DCB9 ); màu nền : #93B874 ; ) < body >
Nhãn hình ảnh- trống, nó chứa các thuộc tính và không có thẻ đóng.
Thuộc tính được sử dụng để hiển thị hình ảnh trên trang src. Srcđến từ nguồn, có nghĩa là Nguồn. Giá trị của thuộc tính src là địa chỉ Hình ảnh.
Dòng trên có nghĩa là hình ảnh nằm trong cùng thư mục (thư mục) với chính tệp html liên kết đến hình ảnh này. Giả sử bạn có một thư mục html, trong đó có chứa chỉ mục.html với đoạn mã trên và hình ảnh có tiêu đề hình ảnh.jpg.
Trong trường hợp này, khi mở chỉ mục.html Bạn sẽ thấy hình ảnh này trong trình duyệt của bạn. Nếu bạn có nó ở một nơi khác (thư mục cao hơn hoặc thấp hơn), thì thay vào đó, bạn sẽ thấy trường màu trắng hoặc hình chữ nhật nhỏ có chữ thập đỏ (không thể tải hình ảnh).
Hình ảnh không phải lúc nào cũng nằm trong cùng thư mục (thư mục) với chính tệp đó, vì vậy việc chỉ định đường dẫn sẽ được mô tả cụ thể hơn sau.
thuộc tính thẻ img
Ngoài src, thẻ img còn có các thuộc tính khác chịu trách nhiệm về kích thước của hình ảnh được hiển thị, chú thích của nó, v.v. 
src- địa chỉ hình ảnh
chiều rộng- Chiều rộng hình ảnh
chiều cao- chiều cao hình ảnh
tiêu đề- chữ ký xuất hiện khi bạn di chuột qua hình ảnh
thay thế- văn bản thay thế. Cần thiết cho robot tìm kiếm và lập chỉ mục hình ảnh
ranh giới- độ dày của đường viền hình ảnh. 0 - không có viền, 1 - viền mỏng nhất, v.v.
Địa chỉ của hình ảnh được chèn (ví dụ)
Thường xuyên, Hình ảnh không được lưu trữ trong cùng thư mục với tập tin html. Với mục đích này, một thư mục được tạo trong cùng thư mục hình ảnh(hoặc img, tùy theo sở thích và màu sắc). Và tất cả những hình ảnh cần thiết đã được đặt trong đó. Trong trường hợp lưu trữ riêng, bạn sẽ cần chỉ định địa chỉ khác cho thuộc tính src 
Nếu tập tin nằm trong thư mục trên thì
Bạn cũng có thể chèn toàn bộ hình ảnh từ một trang web khác mà không cần tải nó xuống thư mục của mình. Để thực hiện việc này, bạn phải có kết nối Internet ổn định và khoảng đoạn mã sau, trong đó bạn nhập địa chỉ của hình ảnh trên Internet vào địa chỉ:
Hình nền trong HTML
BẰNG hình nền các tập tin có phần mở rộng có thể xuất hiện gif, jpg, jpeg Và png. Nếu kích thước ảnh nhỏ hơn cửa sổ trình duyệt, ảnh sẽ tự động tiếp tục lấp đầy phần nền còn lại. TRONG thân hình sử dụng thuộc tính lý lịch, trong đó chúng tôi chỉ định đường dẫn đến hình ảnh
Nhiều nhà thiết kế bố cục mới bắt đầu, mới đi sâu vào bản chất của việc tạo trang web, thường tự hỏi làm thế nào để tạo hình nền trong html. Và ngay cả khi một số người có thể hiểu được nhiệm vụ này, vấn đề vẫn nảy sinh khi kéo dài hình ảnh trên toàn bộ chiều rộng của màn hình. Đồng thời, tôi mong muốn trang web được hiển thị đồng đều trên tất cả các trình duyệt nên phải đáp ứng yêu cầu đa trình duyệt. Bạn có thể đặt nền theo hai cách: sử dụng kiểu CSS. Mọi người đều chọn phương án tối ưu nhất cho mình. Tất nhiên, kiểu CSS thuận tiện hơn nhiều vì mã của nó được lưu trữ trong một tệp riêng biệt và không chiếm thêm các cột trong thẻ chính của trang web, nhưng trước tiên, hãy xem một phương pháp đơn giản để đặt hình ảnh vào nền của trang web.
Các thẻ HTML cơ bản để tạo nền
Vì vậy, hãy chuyển sang câu hỏi, nền bằng html trên toàn bộ màn hình. Để trang web trông đẹp, bạn cần hiểu một chi tiết khá quan trọng: chỉ cần làm nền gradient hoặc sơn màu đồng nhất là đủ, nhưng nếu bạn cần chèn ảnh vào nền thì nó sẽ không giãn ra. trên toàn bộ chiều rộng của màn hình. Ban đầu, bạn cần chọn một hình ảnh hoặc tự thiết kế với tiện ích mở rộng mà trang trên trang web của bạn sẽ được hiển thị. Chỉ sau khi hình nền đã sẵn sàng, hãy chuyển nó vào thư mục có tên “Hình ảnh”. Trong đó, chúng tôi sẽ lưu trữ tất cả hình ảnh, hình động và các tệp đồ họa khác mà chúng tôi sử dụng. Thư mục này phải nằm trong thư mục gốc của tất cả các tệp html của bạn. Bây giờ bạn có thể chuyển sang mã. Có một số tùy chọn để viết mã sẽ thay đổi nền thành ảnh.
- Viết thuộc tính thẻ.
- Thông qua phong cách CSS trong mã HTML.
- Viết kiểu CSS trong một tệp riêng biệt.
Cách tạo nền cho hình ảnh trong HTML là tùy thuộc vào bạn, nhưng tôi muốn nói đôi lời về cách tối ưu nhất. Phương pháp đầu tiên, sử dụng cách viết thông qua thuộc tính thẻ, đã lỗi thời từ lâu. Tùy chọn thứ hai được sử dụng trong những trường hợp rất hiếm, chỉ vì thu được nhiều mã giống nhau. Và lựa chọn thứ ba là phổ biến và hiệu quả nhất. Dưới đây là ví dụ HTML về thẻ:
- Cách ghi đầu tiên là thông qua thuộc tính thẻ (body) trong file index.htm. Nó được viết dưới dạng sau: (body Background= "Folder_name/Image_name.extension")(/body). Nghĩa là, nếu chúng ta có một hình ảnh có tên “Hình ảnh” và phần mở rộng JPG, đồng thời chúng ta đặt tên thư mục là “Hình ảnh”, thì mục nhập mã HTML sẽ trông như thế này: (body Background="Images/Picture.jpg") … (/thân hình) .
- Phương pháp ghi thứ hai ảnh hưởng đến kiểu CSS, nhưng được viết trong cùng một tệp có tên là index.htm. (body style="background: url("../Images/Picture.jpg")").
- Và phương pháp ghi thứ ba được thực hiện thành hai tệp. Trong tài liệu có tên là index.htm, dòng sau được viết: (head)(link rel="stylesheet" type="text/css" href="Path_to_CSS_file")(/head). Và trong tệp kiểu có tên style.css, chúng tôi đã viết: body (nền: url(Images/Picture.jpg")).
Chúng ta đã thảo luận cách tạo hình nền trong HTML. Bây giờ bạn cần hiểu cách kéo dài hình ảnh theo chiều rộng của toàn bộ màn hình.
Các cách kéo dài hình nền theo chiều rộng của cửa sổ
Hãy tưởng tượng màn hình của chúng ta ở dạng phần trăm. Hóa ra 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 kéo dài hình ảnh đến chiều rộng này. Hãy thêm một dòng vào mục hình ảnh trong tệp style.css. Dòng này sẽ kéo dài hình ảnh theo toàn bộ chiều rộng và chiều dài của màn hình. Làm thế nào điều này được viết theo phong cách CSS? Thật đơn giản!
nền: url(Hình ảnh/Picture.jpg")
kích thước nền: 100%; /* mục này phù hợp với 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 một hình ảnh làm nền trong html để lấp đầy toàn bộ màn hình. Ngoài ra còn có một cách để ghi vào tệp index.htm. Mặc dù phương pháp này đã lỗi thời nhưng người mới bắt đầu cần phải biết và hiểu nó. Trong thẻ (head)(style) div (background-size: cover; ) (/style) (/head), mục này có nghĩa là chúng ta phân bổ một khối đặc biệt cho nền, khối này sẽ được định vị trên toàn bộ chiều rộng của cửa sổ. Chúng tôi đã xem xét 2 cách để biến nền của trang web thành hình ảnh HTML để hình ảnh trải dài trê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 nào.
Cách tạo nền cố định
Nếu bạn quyết định sử dụng một hình ảnh làm nền cho tài nguyên web trong tương lai, thì bạn chỉ cần tìm cách làm cho nó bất động để nó không bị giãn dài ra và làm hỏng vẻ ngoài thẩm mỹ. Thật dễ dàng để viết phần bổ sung nhỏ này với sự trợ giúp. Bạn cần thêm một cụm từ trong tệp style.css sau phần nền: url(Images/Picture.jpg") đã được sửa; hoặc thay vào đó, hãy thêm một dòng riêng sau dấu chấm phẩy - vị trí: đã sửa. Như vậy, hình nền của bạn sẽ không chuyển động. Lướt qua nội dung trên trang web, bạn sẽ thấy các dòng văn bản di chuyển nhưng nền vẫn giữ nguyên. Vậy là bạn đã học được cách tạo nền thành hình ảnh trong html theo 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 khi đối mặt với các bảng và khối thường không hiểu cách tạo hình ảnh làm nền bảng trong HTML. Giống như tất cả các kiểu CSS, ngôn ngữ lập trình web này khá đơn giản. Và giải pháp cho vấn đề như vậy là viết một vài dòng mã. Bạn hẳn đã biết rằng việc ghi các hàng và cột trong bảng tương ứng được gọi là các thẻ (tr) và (td). Để làm nền bảng dưới dạng hình ảnh, bạn cần thêm một cụm từ đơn giản vào thẻ (table), (tr) hoặc (td) biểu thị liên kết đến hình ảnh: nền = URL của hình ảnh. Để rõ ràng, hãy đưa ra một vài ví dụ.
Bảng có hình ảnh thay vì nền: ví dụ HTML
Hãy vẽ một bảng 2x3 và đặt nền của nó thành một bức ảnh được lưu trong thư mục “Hình ảnh”: (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). Bằng cách này, bảng của chúng ta sẽ được vẽ vào nền của bức tranh.
Bây giờ chúng ta hãy vẽ cùng một tấm có kích thước 2x3, nhưng chèn ảnh vào các cột được đánh số 1, 4, 5 và 6. (table)(tr)(td Background = “Images/Picture.jpg”)1(/td) (td )2 (/td) (td)3(/td)(/tr) (tr)(td nền = “Hình ảnh/Picture.jpg”)4(/td) (td nền = “Hình ảnh/Picture.jpg”) 5( /td) (td nền = “Hình ảnh/Picture.jpg”)6(/td) (/tr) (/table). Sau khi xem, chúng tôi thấy rằng nền chỉ xuất hiện trong các ô mà chúng tôi đã đăng ký chứ không xuất hiện trong toàn bộ bảng.
Khả năng tương thích đa trình duyệt của trang web
Ngoài ra còn có một thứ như khả năng tương thích giữa nhiều trình duyệt của một tài nguyên web. Điều này có nghĩa là các trang của trang web sẽ được hiển thị chính xác như nhau trong các loại và phiên bản trình duyệt khác nhau. Trong trường hợp này, bạn cần điều chỉnh mã HTML và kiểu CSS cho phù hợp với trình duyệt được yêu cầu. Ngoài ra, trong thời đại phát triển của điện thoại thông minh hiện đại, nhiều nhà phát triển web đang cố gắng tạo ra các trang web phù hợp với cả phiên bản di động và chế độ xem trên máy tính.
Chúc một ngày tốt lành cho tất cả những ai muốn tìm hiểu và học hỏi điều gì đó mới! Bạn đã bao giờ chú ý đến hình thức mà trong quá trình phát triển, người sáng tạo đã quá lười thiết kế nền của các trang chưa? Và tôi đã. Nó có vẻ tồi tệ. Thông thường, do thiếu sự phân chia thông thường giữa các loại thông tin khác nhau, nó bị lẫn lộn và đơn giản là không có mong muốn xem xét thêm bất kỳ điều gì trên một tài nguyên web như vậy.
Để ngăn thảm họa như vậy xảy ra với mình, tôi quyết định viết một bài về chủ đề: “Cách tạo nền trang bằng html”. Sau khi đọc ấn phẩm, bạn sẽ tìm hiểu những công cụ nào bạn có thể sử dụng để đặt thiết kế nền, cách cố định hoặc thay đổi nền, v.v. sẽ giúp trang web của bạn trở nên hấp dẫn. Bây giờ hãy bắt đầu!
Các công cụ cơ bản để thiết lập nền cho trang web
Để đặt hình nền, các nhà phát triển ngôn ngữ web đã cung cấp thuộc tính nền. Nó có sẵn cả trong và trong css.
Trong ngôn ngữ đánh dấu, đây là một thuộc tính của thẻ body và trong biểu định kiểu, nó là thuộc tính chung cho phép bạn thiết lập tối đa 5 đặc điểm nền cùng một lúc. Nền là một phần tử khá linh hoạt có thể được sử dụng để đặt nền ở dạng một màu, hình ảnh màu hoặc thậm chí là hoạt ảnh.
Vì vậy, để đặt hình nền thông qua đơn vị html
chỉ cần viết đoạn mã sau: ... và thay vì dòng chữ “địa chỉ tệp”, hãy chèn đường dẫn đến ảnh.
Tuy nhiên, xin lưu ý! Nếu bạn muốn xem canvas một màu làm nền, được chỉ định bởi một giá trị từ bảng màu, thì việc này được thực hiện bằng thuộc tính bgcolor.
Ví dụ,
..., chúng tôi đã đặt nền đen cho trang web của mình.
Màu sắc trong css và html được chỉ định bằng một từ tiếng Anh (ví dụ: màu đỏ) hoặc một mã đặc biệt, bao gồm dấu # và sáu ký tự sau nó (ví dụ: #FFDAB9).
Khi bạn gõ tùy chọn thứ hai vào phần mềm chuyên dụng dành cho nhà phát triển, bảng màu sẽ tự động xuất hiện trước mặt bạn. Nếu bạn mới bắt đầu học các ngôn ngữ web này thì có thể tra cứu mã màu trên Internet.
Nền như một thuộc tính trong các biểu định kiểu xếp tầng
Nó được đặt trong một tệp riêng biệt với kiểu css hoặc trong một phần tử