Thực hiện kỹ thuật với CSS
Nếu bạn đang thiết kế trang web, bạn có thể quan tâm đến việc tìm hiểu cách tạo hình nền hoặc hình mờ cố định trên trang web. Đây là một điều trị thiết kế phổ biến đã được phổ biến trực tuyến trong một thời gian khá dài. Đó là một hiệu ứng hữu ích để có trong túi thiết kế web của bạn thủ thuật.
Nếu bạn chưa làm điều này trước đây hoặc đã thử nó trước đó mà không có may mắn, quá trình này có vẻ đáng sợ, nhưng nó thực sự không phải là rất khó khăn cả. Với hướng dẫn ngắn gọn này, bạn sẽ nhận được thông tin bạn cần để nắm vững kỹ thuật chỉ trong vài phút sử dụng CSS.
Bắt đầu
Hình nền hoặc hình mờ (thực sự chỉ là hình nền rất nhẹ) có lịch sử trong thiết kế in. Tài liệu từ lâu đã bao gồm hình mờ trên chúng để ngăn chúng không bị sao chép. Ngoài ra, nhiều tờ rơi và tài liệu quảng cáo sử dụng hình nền lớn như một phần của thiết kế cho bản in. Thiết kế web có phong cách mượn dài từ hình ảnh in và nền là một trong những kiểu được mượn này.
Những hình nền lớn này dễ tạo bằng cách sử dụng ba thuộc tính phong cách CSS sau đây:
- hình nền
- Bối cảnh Lặp lại
- background-attachment
- background-size
Hình nền
Bạn sẽ sử dụng hình nền để xác định hình ảnh sẽ được sử dụng làm hình mờ của bạn. Kiểu này chỉ đơn giản sử dụng đường dẫn tệp để tải hình ảnh mà bạn có trên trang web của mình, có khả năng trong thư mục có tên là "hình ảnh".
background-image: url (/images/page-background.jpg);
Điều quan trọng là bản thân hình ảnh sáng hơn hoặc trong suốt hơn một hình ảnh bình thường. Điều này sẽ tạo ra cái nhìn "watermark" trong đó một hình ảnh bán trong suốt nằm phía sau văn bản, đồ họa và các yếu tố chính khác của trang web. Nếu không có bước này, hình nền sẽ cạnh tranh với thông tin trên trang của bạn và khiến bạn khó đọc.
Bạn có thể điều chỉnh hình nền trong bất kỳ chương trình chỉnh sửa nào như Adobe Photoshop.
Bối cảnh Lặp lại
Thuộc tính lặp lại nền tiếp theo. Nếu bạn muốn hình ảnh của mình trở thành đồ họa có hình mờ lớn, bạn sẽ sử dụng thuộc tính này để làm cho hình ảnh đó chỉ hiển thị một lần.
background-repeat: không lặp lại;
Không có thuộc tính "không lặp lại", mặc định là hình ảnh sẽ lặp đi lặp lại trên trang. Điều này là không mong muốn trong hầu hết các thiết kế trang web hiện đại, vì vậy phong cách này nên được coi là cần thiết trong CSS của bạn.
Background-Attachment
Background-attachment là một tài sản mà nhiều nhà thiết kế web quên đi. Sử dụng nó giữ hình nền của bạn cố định tại chỗ khi bạn sử dụng thuộc tính "cố định". Đó là những gì biến hình ảnh đó thành hình mờ được cố định trên trang.
Giá trị mặc định cho thuộc tính này là "cuộn". Nếu bạn không chỉ định giá trị đính kèm nền, nền sẽ cuộn cùng với phần còn lại của trang.
background-attachment: cố định;
Kích thước nền
Kích thước nền là thuộc tính CSS mới hơn. Nó cho phép bạn thiết lập kích thước của một nền dựa trên khung nhìn nó đang được xem. Điều này rất hữu ích cho các trang web đáp ứng sẽ hiển thị ở các kích thước khác nhau trên các thiết bị khác nhau .
background-size: bìa;
Hai giá trị hữu ích mà bạn có thể sử dụng cho thuộc tính này bao gồm:
- Bìa - Cân nền để có chiều rộng đầy đủ hoặc chiều cao đầy đủ được hiển thị. Điều này có nghĩa là một số phần của hình ảnh có thể không xuất hiện trên màn hình nhưng toàn bộ khu vực sẽ được bao phủ.
- Chứa - Cân hình ảnh sao cho toàn bộ chiều rộng và chiều cao được hiển thị trong khu vực đang được tạo kiểu. Hình ảnh không bị cắt, nhưng nhược điểm là các phần của khu vực có thể không được che phủ bởi hình ảnh.
Thêm CSS vào trang của bạn
Sau khi bạn hiểu các thuộc tính trên và giá trị của chúng, bạn có thể thêm các kiểu này vào trang web của mình.
Thêm phần sau vào HEAD của trang web của bạn nếu bạn đang tạo một trang đơn. Thêm nó vào phong cách CSS của một bảng định kiểu bên ngoài nếu bạn đang xây dựng một trang nhiều trang và muốn tận dụng sức mạnh của một trang tính bên ngoài.