Hình nền. Hình nền nền trang HTML
Khi thiết lập bất kỳ trang web nào, ngoài chức năng, thiết kế rất quan trọng. Đây là những gì đặt ra phong cách và thiết kế riêng của một công ty hoặc cá nhân cụ thể mà trang web được tạo ra. Việc tùy chỉnh màu nền và hình ảnh thật dễ dàng bằng cách làm theo hướng dẫn trong bài viết này.
Mở tệp HTML của bạn bằng Notepad hoặc bất kỳ trình soạn thảo văn bản nào khác mà bạn quen dùng. Ví dụ: hãy lấy một trang web nguyên thủy có ít văn bản nhất. Bạn có thể mở tệp của mình bằng bất kỳ trình duyệt nào.
Nhập vào thẻ tham số bgcolor=”*****”, trong đó ***** là mã màu. Bạn có thể tìm ra màu cho HTML trong bất kỳ trình chỉnh sửa đồ họa nào bằng cách chọn tùy chọn “dành cho web” hoặc trên trang web https://colorscheme.ru/color-names
- style="background-image: url('file:///C:/Users/FILE_PATH.jpg')"
Xin lưu ý rằng đối với người dùng có độ phân giải màn hình lớn hơn, hình ảnh của bạn sẽ bị trùng xuống và sang bên phải. Sẽ không đẹp nếu hình ảnh không đơn sắc. Có các lệnh đặc biệt để sửa tham số này.
- lặp lại nền : "Giá trị." Các tùy chọn cho giá trị của bạn có thể là: “repeat-x” – lặp lại hình nền của bạn theo cả chiều ngang và chiều dọc. “repeat-y” – chỉ lặp lại theo chiều dọc. “no-repeat” – hình ảnh bị đóng băng tại chỗ và không lặp lại. “khoảng trắng” – toàn bộ trang sẽ được lấp đầy với số lượng bản sao tối đa của hình ảnh, những bản ngoài cùng sẽ bị cắt. “tròn” – tùy chọn tương tự, nhưng các cạnh của hình ảnh sẽ được thu nhỏ cẩn thận;
- phần đính kèm nền: "Giá trị." Nếu bạn thay thẻ “scroll” thay cho chữ Value thì hình ảnh sẽ cuộn theo trang web. “đã sửa” – nền không thay đổi khi cuộn;
- kích thước nền: Giá trị Value2. Ở đây các giá trị phải lấy giá trị tính bằng pixel. Ví dụ: 100px 200px. Ngoài pixel, giá trị phần trăm được chấp nhận. Đây là một tùy chọn để lấp đầy trang bằng một hình ảnh. Ngoài số, bạn có thể nhập hai tham số: “contain” – lấp đầy trang bằng hình ảnh dọc theo cạnh dài và “cover” – lấp đầy trang bằng hình ảnh dọc theo chiều rộng.
Khi bạn biết những điều cơ bản về cách điền nền tảng bằng HTML vào một trang, bạn đã sẵn sàng tạo trang web đầu tiên của mình.
Chào mọi người! Người hầu khiêm tốn của bạn sẽ liên hệ với bạn để cung cấp một phần tài liệu hữu ích và thiết thực về chủ đề cách đặt nền cho trang web. Đây là bước khởi đầu trong bố cục html và ở đây tôi sẽ minh họa rõ ràng bằng một ví dụ về cách bạn có thể tạo nền đẹp cho một trang web chắc chắn sẽ thu hút người dùng Internet và thêm tính độc đáo.
Nếu bạn để ý, hầu hết các nhà kinh doanh trực tuyến đều sử dụng hình nền độc đáo trên các trang bán hàng và đăng ký của họ. Hôm nay chúng ta sẽ phân tích thành phần kỹ thuật của quá trình này.
Vì vậy, tất nhiên trước tiên chúng ta cần một bức tranh. Có một trang web rất tốt trên Internet nước ngoài nơi bạn có thể tải xuống nhiều loại hình ảnh làm nền cho website. Đơn giản là có một số lượng lớn trong số họ ở đó. Trang web này có tên là Những mẫu tinh tế.
Nó xuất hiện ở vị trí đầu tiên trong danh sách công cụ tìm kiếm của Google, vì vậy tôi khuyên bạn nên sử dụng nó cho công việc. Bạn cũng có thể tìm thấy một số lượng lớn các trang web khác nếu bạn nhập vào công cụ tìm kiếm những nội dung như “mẫu hình nền”, “tải xuống hình nền cho trang web”, v.v.
Nếu bạn không gặp vấn đề gì với tiếng Anh, bạn sẽ hiểu nó mà không gặp khó khăn gì.
Trong bài viết này tôi đã chọn một chủ đề và nó được gọi là vải tuýt. Bạn có thể tải nó xuống.
Đây là giao diện của phiên bản nhỏ trên trang web
Đầu tiên, tạo một tài liệu mới trong chương trình
Và trước khi chỉnh sửa, hãy nhớ lưu nó dưới một tên chẳng hạn chỉ mục.html và tạo một thư mục trên máy tính, ví dụ: bạn có thể tạo thư mục “Trang web của tôi” và đặt tệp chỉ mục của chúng tôi (index.html) vào đó. Tốt hơn là tạo một thư mục bằng tiếng Anh để trình duyệt không bị nhầm lẫn. và hiển thị trang web không chính xác.
Ngoài ra, trong thư mục chính “trang web của tôi”, bạn cần tạo thêm hai thư mục con nữa, trong một thư mục chúng ta sẽ đặt tất cả các ảnh của mình và nó sẽ được gọi là “hình ảnh”, còn thư mục còn lại chúng ta sẽ đặt tên là “CSS” (kiểu xếp tầng sheet) và đặt tập tin ở đó phong cách.css
Bây giờ chúng ta có thể làm việc trong tài liệu của mình. Bước tiếp theo là chèn một mã HTML trống, cái gọi là khung chính mà từ đó tất cả bắt đầu. Bạn có thể tải nó trực tiếp. Tiếp theo, chúng tôi sẽ sao chép mọi thứ từ tệp này và chuyển nó vào tệp chương trình của chúng tôi. Kết quả cuối cùng sẽ giống như sau
Bên cạnh tên tập tin, bạn sẽ thấy một đĩa mềm màu đỏ. Vì vậy, nếu màu đỏ nghĩa là file chưa được lưu, bạn nhớ bấm vào nút lưu để đĩa chuyển sang màu xanh.
Trong thẻ tiêu đề, bạn có thể thay đổi tiêu đề của tài liệu, ví dụ: bạn có thể đặt tiêu đề là “Trang web đầu tiên của tôi”. Và đảm bảo rằng trang của bạn được lưu ở dạng mã hóa UTF-8
Mặt khác, nếu có một mã hóa khác, chẳng hạn như windows-1251, thì văn bản của tài liệu trong trình duyệt sẽ được hiển thị bằng chữ tượng hình. Bạn có thể thay đổi mã hóa trong phần “Mã hóa – Mã hóa trong Utf-8 (không có BOM)” trên thanh công cụ chương trình.
Và đừng quên lưu lại mọi hành động chúng ta thực hiện.
Bây giờ hãy bắt đầu tạo nền trong tài liệu của chúng ta. Tôi sẽ nói ngay rằng tất cả các hành động của chúng tôi trong thiết kế trang web sẽ diễn ra bằng cách sử dụng các biểu định kiểu xếp tầng được gọi là CSS, nghĩa là chúng tôi sẽ tạo khung bằng html và chúng tôi sẽ mang đến cho nó một kiểu dáng và giao diện đẹp mắt bằng cách sử dụng CSS.
Bằng cách này, bạn sẽ quen với thứ tự hành động chính xác. Bạn không nên xử lý trực tiếp các kiểu trong tài liệu html; tốt hơn là nên đặt chúng trong một tài liệu riêng.
Để thực hiện việc này, trong chương trình Notepad++ của chúng tôi, chúng tôi sẽ tạo một tệp khác và gọi nó là Style.css và lưu nó vào thư mục css mới, tệp này sẽ nằm trong thư mục dùng chung “Trang web của tôi”
Tuyệt vời! Để trình duyệt của chúng tôi hiển thị trang chính xác, chúng tôi cần đưa biểu định kiểu vào tài liệu html của mình. Đây là cách nó được thực hiện
Chúng ta nhập trực tiếp toàn bộ dòng trên. Với dòng này, chúng tôi kết nối biểu định kiểu của chúng tôi.
Bây giờ chúng ta sẽ xác định hình nền cho thẻ body thông qua style sheet. Để làm điều này, chúng ta tạo cấu trúc sau trong tài liệu style.css (chỉ cần lấy nó và viết vào mã chương trình)
Hãy để tôi giải thích một chút ở đây. Thuộc tính nền có nhiều giá trị, một trong số đó là lặp lại nền, chịu trách nhiệm kéo dài hình nền của chúng ta cho tài liệu web.
BỐI CẢNH LẶP LẠI:
REPEAT //(kéo dài theo chiều ngang và chiều dọc) REPEAT-X // (chỉ kéo dài theo chiều ngang) REPEAT-Y //(chỉ kéo dài theo chiều dọc) KHÔNG-REPEAT //(không lặp lại hình nền)
Trong trường hợp của chúng tôi, chúng tôi sao chép hình ảnh nhỏ của mình theo cả chiều dọc và chiều ngang. Kết quả là toàn bộ trang chứa đầy hình ảnh của chúng tôi. Đây là những gì nó trông giống như trong trình duyệt:
Tôi cũng đã lựa chọn các trang web đặc biệt dành cho bạn, nơi bạn có thể tải xuống hình nền đẹp cho trang web
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 đang chọn 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, như vậy 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.
Vlad Merzhevich
Do đặc thù của các trang web, hình nền đóng một vai trò quan trọng trong bố cục của tài liệu trang web. Đồng thời, họ tích cực tham gia vào nhiều việc khác nhau, chẳng hạn như tự động hóa quá trình đính kèm hình ảnh vào văn bản, tạo hiệu ứng chuyển màu và tất nhiên là thêm nền cho nội dung. Dưới đây là một số khía cạnh của việc sử dụng hình nền.
Nền trên một trang web
Việc đặt hình nền cho trang web theo truyền thống xảy ra thông qua thuộc tính nền của thẻ.
. Mẫu này được lặp lại theo chiều ngang và chiều dọc, do đó lấp đầy toàn bộ cửa sổ trình duyệt. Rõ ràng là không có lựa chọn đặc biệt nào cho sự sáng tạo ở đây, vì vậy hãy chuyển sang phong cách và xem những gì có thể được thực hiện bằng CSS.CSS có năm thuộc tính kiểm soát hình nền: bổ sung, vị trí và lặp lại. Tuy nhiên, tất cả các tham số này được thay thế bằng một thuộc tính chung, nền, mà chúng ta sẽ sử dụng trong tương lai.
Thêm hình nền
Việc thêm ảnh diễn ra bằng cách đặt địa chỉ của ảnh bằng từ khóa url. Để kiểm soát sự lặp lại của một hình ảnh, các đối số không lặp lại, lặp lại-x (lặp lại theo chiều ngang) và lặp lại-y (lặp lại theo chiều dọc) được sử dụng. Nhờ đó, bạn có thể có được trang web như trong Hình. 1.
Để đặt hình ảnh cho một trang web, bạn cần thêm thuộc tính kiểu nền vào bộ chọn BODY, như trong Ví dụ 1.
Ví dụ 1: Ảnh nền
Trong ví dụ này, đồ họa target.gif được xác định là nền của trang web mà không lặp lại hình ảnh. Để ngăn hình ảnh bám chặt vào các cạnh của trình duyệt, nó được dịch chuyển 30 pixel sang phải và 20 pixel xuống so với vị trí ban đầu.
Lặp lại một mẫu
Do bạn có thể đặt mẫu nền lặp lại theo chiều ngang hoặc chiều dọc, nên có một số tùy chọn để thiết kế trang web. Ví dụ: để tạo một sọc dọc dọc theo cạnh trái (Hình 2), bạn sẽ cần hình ảnh hiển thị trong Hình. 3.
Thiết kế phải sao cho khớp với nhau theo chiều dọc mà không có đường nối đáng chú ý, đồng thời tạo thành một tổng thể duy nhất với màu nền được chỉ định của trang web. Ví dụ 2 cho thấy cách tạo một hình nền như vậy, một lần nữa sử dụng thuộc tính nền và giá trị lặp lại của nó.
Ví dụ 2. Lặp lại nền theo chiều dọc
Tương tự, bạn có thể lặp lại nền theo chiều ngang, chẳng hạn bằng cách tạo độ dốc và đặt nó làm hình nền (Hình 4).
Để có được trang web như trong Hình. 4, trước tiên bạn sẽ cần tạo một bức ảnh có hiệu ứng chuyển màu. Chiều rộng đủ để chỉ định 20-40 pixel và chiều cao của hình ảnh phụ thuộc vào mục đích của tài liệu và chiều cao dự kiến của nội dung trang web. Cũng đừng quên rằng một bản vẽ lớn sẽ làm tăng kích thước của tệp đồ họa. Và điều này sẽ ảnh hưởng tiêu cực đến tốc độ tải của nó và cuối cùng dẫn đến hiển thị nền chậm hơn. Trong trường hợp này, hình ảnh có kích thước 30x200 pixel khá phù hợp (Hình 5).
Ví dụ 3 hiển thị mã HTML để tạo nền gradient.
Ví dụ 3: Lặp lại nền ngang
Thiết kế chuyển màu phù hợp với khối một màu, vì vậy trong ví dụ này, chúng tôi thêm một lớp để hiển thị nội dung của trang web.
Thêm hình ảnh vào văn bản
Bằng cách sử dụng hình nền, bạn có thể tự động hóa quá trình thêm đồ họa vào văn bản cụ thể, chẳng hạn như tiêu đề. Để thực hiện việc này, hãy sử dụng thuộc tính phổ quát nền, được áp dụng cho bộ chọn mong muốn. Giá trị là đường dẫn đến hình ảnh và để nó không lặp lại, đối số không lặp lại (ví dụ 4).
Ví dụ 4: Thêm ảnh
Phần mở đầu
Văn bản chính
Như trong ví dụ này, bản vẽ có thể được di chuyển theo chiều ngang và chiều dọc từ vị trí ban đầu, mặc định đây là góc trên bên trái của thành phần khối. Dịch chuyển nền cho phép bạn định vị hình ảnh liên quan đến văn bản theo cách mong muốn. Để ngăn văn bản chồng lên hình ảnh, bạn phải thêm thuộc tính đệm-trái, do đó văn bản sẽ được dịch sang phải một khoảng cách đã chỉ định. Nó là riêng biệt trong từng trường hợp và thường bằng chiều rộng của hình ảnh cộng với khoảng cách mong muốn giữa hình ảnh và văn bản.
27/12/14 56.3KBất kỳ căn phòng nào cũng sẽ trông đẹp hơn nhiều nếu sàn của nó được trải một tấm thảm Ba Tư đắt tiền. Vậy tại sao trang web của bạn lại tệ hơn? Có lẽ đã đến lúc “trải” sàn nhà bằng một tấm thảm thủ công sang trọng, đắt tiền. Chúng ta hãy xem xét kỹ hơn cách tạo nền cho trang web:
Nền cho trang web
Điều đó xảy ra là thiết kế trang web cũ đã trở nên nhàm chán. Và tôi muốn một cái gì đó mới và ngon. Và thiết kế mới sẽ giống nhau nếu bạn tự làm.
Nhưng việc tự mình thay đổi hoàn toàn toàn bộ thiết kế của một tài nguyên là một nhiệm vụ vô ơn. Và không phải bàn tay của ai cũng được huấn luyện bài bản cho nhiệm vụ này. Do đó, cách dễ nhất để làm mới mẫu cũ là thay đổi màu nền của tài nguyên hoặc hình nền của nó.
Có một số cách để thay đổi hình nền trên một trang web. Đối với điều này, các khả năng của CSS hoặc html được sử dụng. Nhưng nhiều thuộc tính để làm việc với nền có cùng tên và phương thức ứng dụng trong các công nghệ web này.
Khái niệm cơ bản khi làm việc với nền trong html
Một số yếu tố có thể được sử dụng làm nền:
- Màu sắc;
- Hình nền;
- Hình ảnh kết cấu.
Chúng ta hãy xem xét việc sử dụng từng cái một cách chi tiết hơn.
Để đặt màu nền cho trang web, hãy sử dụng thuộc tính màu nền của thuộc tính style. Tức là để đặt màu chủ đạo cho trang web bạn cần ghi vào bên trong thẻ
. Ví dụ:Nền website #55D52B
Ngoài mã màu thập lục phân, giá trị ở định dạng từ khóa hoặc RGB được hỗ trợ. Ví dụ:
Nền trang web rgb(23,113,44)
Nền trang web màu xanh lá cây
Việc đặt màu nền bằng từ khóa có một số hạn chế so với hai phương pháp còn lại.
HTML chỉ hỗ trợ 16 từ khóa để đặt màu. Dưới đây là một vài trong số họ: trắng, đỏ, xanh, đen, vàng và những người khác.
Vì vậy, để đặt nền cho trang web html, tốt hơn hết bạn nên sử dụng định dạng thập lục phân hoặc RGB.
Ngoài việc lựa chọn màu sắc, còn có các tùy chọn tùy chỉnh khác. Nếu thuộc tính màu nền được đặt thành trong suốt thì nền của trang sẽ trở nên trong suốt. Giá trị này được gán cho thuộc tính này theo mặc định.
Bây giờ chúng ta hãy xem xét khả năng của ngôn ngữ siêu văn bản trong việc thiết lập hình nền cho một trang web. Điều này có thể được thực hiện bằng cách sử dụng thuộc tính hình nền.
Như bạn có thể thấy từ đoạn mã, hình ảnh được liên kết thông qua đường dẫn url được chỉ định trong dấu ngoặc đơn. Nhưng không phải tất cả các hình ảnh đều lớn đến mức kích thước của chúng lấp đầy toàn bộ diện tích màn hình. Hãy xem hình ảnh nhỏ hơn sẽ được hiển thị như thế nào.
Giả sử chúng ta đang phát triển một trang web về thơ ca và chúng ta cần sử dụng hình ảnh Pegasus làm nền. Con ngựa có cánh sẽ nhân cách hóa sự tự do trong tư tưởng sáng tạo của nhà thơ!
Chúng ta cần hình ảnh được hiển thị ở giữa màn hình một lần. Nhưng thật không may, trình duyệt không hiểu được mong muốn cao cả của chúng ta. Và nó hiển thị hình ảnh nhỏ hơn cho nền của trang web nhiều lần mà diện tích màn hình có thể chứa:
Có lẽ bốn chú ngựa đang cười với đôi cánh sẽ là nguồn cảm hứng quá lớn cho các nhà thơ. Vì vậy, chúng tôi nghiêm cấm việc nhân bản Pegasus của chúng tôi. Chúng tôi thực hiện việc này bằng cách sử dụng thuộc tính lặp lại nền. Những giá trị khả thi:
- lặp lại-x – lặp lại hình nền theo chiều ngang;
- lặp lại-y – theo chiều dọc;
- lặp lại – trên cả hai trục;
- không lặp lại – việc lặp lại bị cấm.
Trong số các tùy chọn được liệt kê, chúng tôi quan tâm đến tùy chọn cuối cùng. Trước khi thay đổi nền của trang web, chúng tôi sử dụng nó trong mã của mình:
Nhưng tất nhiên sẽ tốt hơn nếu tờ rơi của chúng ta nằm ở giữa màn hình. Thuộc tính vị trí nền được thiết kế chính xác để định vị hình nền trên trang. Bạn có thể đặt tọa độ vị trí theo nhiều cách:
- Từ khóa ( trên, dưới, giữa, trái, phải);
- Tỷ lệ phần trăm – việc đếm bắt đầu từ góc trên bên trái;
- Theo đơn vị đo lường (pixel).
Hãy sử dụng tùy chọn định tâm đơn giản nhất:
Điều xảy ra là bạn cần sửa vị trí của ảnh khi cuộn. Do đó, trước khi tạo hình ảnh làm nền của trang web, hãy sử dụng thuộc tính đính kèm nền đặc biệt. Các giá trị nó chấp nhận là:
- cuộn;
- đã sửa.
Chúng ta cần giá trị cuối cùng. Bây giờ mã ví dụ của chúng tôi sẽ trông như thế này:
Nền kết cấu trang web
Trong ví dụ đầu tiên, chúng tôi sử dụng phong cảnh sa mạc rộng lớn và đẹp đẽ làm nền. Nhưng bạn phải trả giá đầy đủ cho vẻ đẹp như vậy. Trọng lượng của một hình ảnh được tạo ở chất lượng cao có thể lên tới vài megabyte.
Khối lượng này không ảnh hưởng đến tốc độ tải trang của trình duyệt có kết nối Internet tốc độ cao. Nhưng còn Internet di động thì sao, khi sử dụng, việc tải vài “mét” sẽ mất rất nhiều thời gian?
