Hình nền. Màu nền

Trong bài viết này tôi sẽ nói với bạn như thường lệ đặt nền cho trang web sử dụng HTML mã số.

Tôi cũng sẽ giới thiệu cho bạn một dịch vụ nước ngoài tuyệt vời để chọn hình nền liền mạch.
Ngày nay, việc cài đặt trang web được thực hiện dễ dàng và thuận tiện hơn thông qua bảng điều khiển CMS như WordPress.
Có thể cần phải thay đổi mẫu trang web bán hàng, bài viết này sẽ giúp ích cho việc này.

Nếu bạn không biết nó là gì HTML, thì đây thường có thể được gọi là ngôn ngữ của các trang web hoặc một bộ quy tắc mà các trang web được tạo ra.

Ví dụ: bạn nhìn thấy một hình ảnh trên một trang web, nhưng trong mã HTML của trang đó, nó có thể trông như thế này:

Đặt màu đồng nhất cho nền trang.

Để cài đặt nền màu đặc, cần gắn thẻ thêm thuộc tính bgcolor.

< html >
< head >
< title >Tiêu đề trang.

< body bgcolor = "#ffcc00" >

Bạn có thể dán mã này vào tệp văn bản và lưu nó với phần mở rộng .html. Sau đó mở nó bằng bất kỳ trình duyệt nào và xem kết quả.

Như bạn có thể đoán, màu nền xuất hiện do mã màu trong thuộc tính bgcolor="giá trị", có thể được tìm thấy bằng cách theo liên kết này.

Đặt hình ảnh làm nền của trang HTML.

Để đặt hình ảnh làm nền, bạn có thể sử dụng thuộc tính lý lịch trong thẻ .

< html >
< head >
< title >Tiêu đề trang.

< body background = "http://сайт/images/mlmsecret.jpg" >Xin chào. Đây là trang đầu tiên của tôi

Bạn có thể nhận thấy rằng thuộc tính lý lịch bằng đường dẫn của tệp được sử dụng làm nền.

Để nhanh chóng thay đổi nền hoặc bất kỳ hình ảnh nào trên trang, chỉ cần chỉ định đường dẫn mới tới tệp của bạn bằng trình chỉnh sửa văn bản.

Để tìm đường dẫn trước đó, bạn cần truy cập trang có ảnh, nhấp chuột phải vào ảnh và nhấp vào “Sao chép URL ảnh”. bằng cách này bạn sẽ thấy tên của hình ảnh/nền. Sau đó, bạn có thể chỉ cần thay thế hình ảnh cũ bằng hình ảnh của mình, sử dụng cùng tên tệp.

Đây là những điều cơ bản đơn giản nhất để thiết lập nền trong html, Bây giờ đến phần thú vị. 🙂

Chào mừng đến với blog của tôi. Hãy tiếp tục tìm hiểu những điều cơ bản về html. Hướng dẫn này sẽ đơn giản và thú vị đến mức tôi hy vọng bạn sẽ muốn tìm hiểu thêm về ngôn ngữ lập trình. Chỉ trong vài phút, bạn sẽ học cách tạo một bức ảnh làm nền trong HTML và đạt được kết quả xuất sắc.

Tôi cũng sẽ nói về một số sắc thái giúp nền mịn và đẹp nhất có thể. Nào, chúng ta bắt đầu nhé?

Chọn một hình ảnh

Tôi muốn bắt đầu bằng việc chọn một hình ảnh. Để bạn trông đồng đều và đẹp hơn trên trang mà không cần phải bận tâm đến kích thước và căn chỉnh. Tôi đề nghị ngay lập tức tìm kiếm kết cấu liền mạch. Nó là gì?

Thật không may, không thể kéo dài hình ảnh trong html để lấp đầy toàn bộ màn hình. Ảnh được sử dụng ở kích thước thực tế. Nếu ảnh nhỏ thì nó sẽ bao phủ toàn bộ khu vực, như trong ảnh chụp màn hình bên dưới. Để kéo dài hình ảnh, bạn sẽ phải tạo một tài liệu CSS bổ sung, nếu không có tài liệu này thì nó sẽ không hoạt động.

Mặc dù vậy, bạn có cơ hội bỏ qua hệ thống. Để thực hiện việc này, hãy sử dụng Photoshop và hình ảnh có chiều rộng tối đa của màn hình (1280x720). Mặc dù trong trường hợp này, khi cuộn xuống, hình ảnh sẽ thay thế một hình ảnh khác.

Một lựa chọn tốt hơn nhiều nếu bạn không muốn sử dụng css là sử dụng các họa tiết liền mạch. Họ không có bất kỳ khớp nào có thể nhìn thấy được. Chúng giống như giấy dán tường hoặc gạch hiện đại trong thiết kế. Cái này thay thế cái kia và không nhìn thấy khớp nào.

Nếu bạn quan tâm đến việc không có hậu quả pháp lý đối với việc sử dụng chúng, thì tôi khuyên bạn nên tìm kiếm trên trang web Pixabay.com .

HTML

Bây giờ hãy làm việc với mã. Tôi cần lưu ý ngay rằng chúng tôi hiện đang làm việc với html, nghĩa là chúng tôi đang thay đổi hình ảnh không phải cho toàn bộ trang web mà chỉ cho một trang cụ thể mà mã đang được viết. Nếu bạn quan tâm đến việc thay đổi toàn bộ tài nguyên thì bạn cần viết mã bằng cách sử dụng css, Nhưng nhiều hơn về điều này sau.

Vì vậy, bạn có thể làm việc trong notepad, tôi thích NotePad++ hơn. Sẽ thuận tiện hơn nhiều khi làm việc trong đó: mã được hoàn thành cho bạn, các thẻ được đánh dấu. Chương trình này miễn phí và nặng khoảng 3 MB. Tôi đánh giá cao nó, đặc biệt nếu bạn là người mới bắt đầu.

Vì vậy, để gắn thẻ thân hình bạn cần thêm thuộc tính lý lịch và chỉ ra liên kết đến hình ảnh nơi hình ảnh sẽ được chụp. Đây là những gì nó trông giống như trong chương trình.

Bạn chỉ có thể mở notepad và sao chép mã này. Trong dấu ngoặc kép, hãy đặt liên kết đến hình ảnh bạn thích.

Tôi muốn lưu ý cho người mới bắt đầu, đây là điểm chính. Nếu bạn chụp ảnh từ Pixabay, thì bạn cần dán liên kết không phải trên trang có hình ảnh mà mở hình ảnh trong tab tiếp theo.

Sao chép URL chính xác này.

Lưu tài liệu. Đừng quên rằng nếu bạn sử dụng notepad thì cần phải sử dụng tiện ích mở rộng .html . Chỉ cần đặt tên cho tài liệu, ví dụ: trở lại.html . Nếu không, nó sẽ được lưu dưới dạng tài liệu văn bản và trình duyệt sẽ không hiểu nó cần làm gì.

Xong, trang này được tô bằng một màu khác.

Nếu bạn muốn tìm hiểu thêm về html, tôi khuyên bạn nên tải xuống khóa học miễn phí của Evgeniy Popov . Từ đó bạn sẽ học được nhiều thẻ hơn, khả năng ngôn ngữ, thử một số kỹ thuật mới và biết thêm nhiều điều.

Tôi sẽ không nói rằng các khóa học của Evgeniy Popov cực kỳ phổ biến. Nhiều chuyên gia mắng mỏ anh ta, và nếu bạn đã từng gặp những tuyên bố như vậy, thì đây là ý kiến ​​​​của tôi. Những bài học này được cung cấp miễn phí và mặc dù vậy, chúng vẫn hoàn thành xuất sắc nhiệm vụ chính của mình - chỉ cho người mới bắt đầu những kiến ​​​​thức cơ bản và giúp họ cập nhật.

Giống như mỗi người viết đều có quan điểm riêng về cách viết, các lập trình viên cũng có phong cách riêng của họ. Bạn có thể dành cả đời để học cách tạo trang web, nhưng bạn cần phải bắt đầu từ đâu đó. Từ sách? Không phải cái này. Đúng, chúng chứa thông tin đáng tin cậy hơn, thông tin cập nhật hơn, nhưng chúng rất khó nắm vững.

Bạn không đồng ý với tôi? Tôi có thể đưa ra một giải pháp thay thế. Sách của Elizabeth và Erica Freeman Học HTML, XHTML và CSS " Đây không phải là một cuốn sách bán chạy quá nhàm chán và được xuất bản cách đây không lâu, vào năm 2016. Thông tin vẫn chưa trở nên lỗi thời.

CSS

Nếu bạn cần lặp lại nền trên tất cả các trang trên trang web của mình thì CSS là điều bắt buộc. Tất nhiên, bạn có thể chỉ định đường dẫn mỗi lần, như trong chương trước. Nhưng hãy tưởng tượng nếu theo thời gian bạn cần phải thay thế nó: liên kết trở nên lỗi thời hoặc đơn giản là bạn muốn thay đổi thiết kế. Vào từng trang và đổi mã? Điều này sẽ không hoạt động.

CSS giúp giải quyết vấn đề này. Bạn cần tạo một tệp có phần mở rộng css và nhập mã sau:

Hãy nói một chút về chính mã đó. Trong ngoặc đơn, sau địa chỉ bạn có thể nhập liên kết tới ảnh từ nguồn của bên thứ ba hoặc chỉ cần nhập tên của tài liệu nếu ảnh nằm trong cùng thư mục với tệp này.

Dành cho những người muốn biết rõ hơn

Với css bạn có thể kéo dài hình nền, đảm bảo nó không lặp lại, thêm hoạt ảnh GIF và hơn thế nữa.

Bạn không thể viết mọi thứ trong một bài viết. Và tôi đã không đặt ra một nhiệm vụ như vậy cho chính mình. Có rất nhiều điều tế nhị, và nếu họ hứa sẽ kể cho bạn nghe mọi chuyện trong một bài viết thì đây chẳng qua là một sự lừa dối.

Bạn có muốn học cách viết trang web một cách chính xác? Tôi khuyên bạn nên học ngôn ngữ lập trình. Tôi có thể giới thiệu khóa học của Andrey Bernatsky “ HTML5 và CSS3 từ Zero đến Pro " Tôi thực sự thích tác giả này. Tôi đã không tham gia khóa học đặc biệt này; cách đây vài năm cũng có một khóa học tương tự nhưng kém hiện đại hơn.

Tác giả nói chuyện rất hay, mọi thứ đều dễ hiểu và dễ hiểu. Điểm nổi bật của khóa học này là bạn không chỉ học mà còn tạo một trang web cụ thể cùng với giáo viên. Kết quả là bạn sẽ có được một tấm danh thiếp, một blog và thậm chí là một cửa hàng trực tuyến. Rất tuyệt. Bạn có thể xem ba bài học lý thuyết đầu tiên về HTML5 từ khóa học này ngay tại đây.

Nhân tiện, cùng với khóa học này, bạn nhận được 7 phần thưởng: kiến ​​thức cơ bản về html và css của Andrei Bernatsky, bố cục cho người mới bắt đầu, tạo trang đích trong một buổi tối và hơn thế nữa. Trước khi bạn cam kết đào tạo nghiêm túc, hãy thử khóa học miễn phí " Thực hành HTML5 và CSS3 ».

Vâng, về cơ bản là tất cả. Đăng ký nhận bản tin để tìm hiểu thêm. Tôi sẽ sớm cho bạn biết thêm một chút về bố cục thích ứng, tăng thu nhập từ bất kỳ blog nào và đưa ra nhiều mẹo hữu ích để đơn giản hóa công việc của bạn. Hẹn gặp lại và chúc may mắn trong nỗ lực của bạn.

Màu nền là một yếu tố khá quan trọng của bất kỳ trang web nào. Thứ nhất, nó đặt ra tâm trạng mong muốn và tâm trạng chung của trang web, và thứ hai, nó tạo điều kiện thuận lợi cho việc nhận thức văn bản.

Màu nền của trang web được đặt bằng thuộc tính bgcolor của thẻ .

Ví dụ 1: Thay đổi màu nền

Màu sắc có thể được chỉ định dưới dạng giá trị thập lục phân hoặc theo tên của nó.

Mặc dù bạn có thể chỉ định bất kỳ màu nào cho nền, nhưng hầu hết các trang web đều sử dụng nền trắng và chữ màu đen làm tùy chọn phổ biến nhất.

Hình nền

Bạn có thể sử dụng bất kỳ hình ảnh phù hợp nào làm nền. Nền không được làm phân tán sự chú ý khỏi văn bản nhưng phải hòa hợp tốt với bảng màu của trang web và có kích thước nhỏ để tải nhanh. Nếu sau tất cả những điều trên mà bạn vẫn muốn thêm hình nền vào trang thì bạn nên sử dụng thuộc tính nền của thẻ .

Ví dụ 2: Thêm hình nền

Nếu hình ảnh nhỏ hơn kích thước màn hình điều khiển, nó sẽ được mở rộng theo chiều ngang và chiều dọc.

Vì hình nền tải chậm hơn màu nền nên bạn có thể nhận được văn bản không thể đọc được trong một thời gian cho đến khi tải hình ảnh. Điều tương tự có thể xảy ra nếu hình ảnh bị tắt trong trình duyệt. Vì vậy, nên luôn đặt màu nền cùng với ảnh nền (ví dụ 3).

Ví dụ 3: Sử dụng ảnh nền và màu nền

Bôi cảnh đa được sửa chưa

Theo mặc định, khi bạn sử dụng thanh cuộn, hình nền sẽ di chuyển theo nội dung của trang web. Internet Explorer cho phép bạn cố định nền bằng thuộc tính thẻ bgproperties ="fixed" .

Ví dụ 4: Đặt nền cố định

Bằng cách chỉ định thuộc tính bgproperties, như trong Ví dụ 4, hình nền trên trang web sẽ đứng yên nhưng văn bản, đồ họa và các thành phần khác sẽ di chuyển cùng với thanh cuộn.

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.

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 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ẻ:

1. 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) .
2. 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")").
3. 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.

Bấ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 “che phủ” 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 nguồn 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, 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 mỉm 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?

Tất cả những vấn đề này đều được giải quyết với sự trợ giúp của nền có kết cấu. Nó sử dụng một hình ảnh nhỏ làm mẫu kết cấu. Ngay cả khi nó được lặp lại nhiều lần, bản vẽ chỉ được tải một lần.

Để tạo nền tối cho trang web, hãy vào Photoshop, tạo một hình ảnh ở dạng dải dài 1200 pixel và rộng 15 pixel. Sau đó, chúng tôi áp dụng một gradient đen trắng đơn giản và kết nối kết cấu thu được với trang của trang web:

Công cụ CSS

Tất cả các thuộc tính được mô tả ở trên cũng áp dụng cho Cascading Style Sheets. Hãy tạo nền trang web css bằng cách viết lại mã từ một trong những ví dụ trước đây của chúng tôi.