Tự động thay đổi hình nền css
|
Chủ tịch WebFX. Bill có hơn 25 năm kinh nghiệm trong ngành tiếp thị Internet chuyên về SEO, UX, kiến trúc thông tin, tự động hóa tiếp thị, v.v. Nền tảng của William về máy tính khoa học và giáo dục từ Shippensburg và MIT đã cung cấp nền tảng cho MarketingCloudFX cũng như các dự án nghiên cứu và phát triển quan trọng khác tại WebFX
Trong hướng dẫn này, chúng ta sẽ tìm hiểu kỹ thuật đơn giản nhất để làm cho hình nền trải dài hoàn toàn để bao phủ toàn bộ khung nhìn của trình duyệt. Chúng tôi sẽ sử dụng thuộc tính CSS Show
Ví dụ về hình nền đầy đủ đáp ứngViệc có một bức ảnh lớn bao phủ toàn bộ nền của trang web hiện đang khá phổ biến Dưới đây là một số trang web có hình nền đầy đủ đáp ứng.  Các khái niệm cốt lõi để tạo hình nền đáp ứng bằng CSSĐây là kế hoạch trò chơi của chúng tôi Sử dụng thuộc tính kích thước nền để bao phủ toàn bộ chế độ xemThuộc tính CSS background-size: cover;3 có thể có giá trị là background-size: cover;5. Giá trị background-size: cover;5 yêu cầu trình duyệt tự động chia tỷ lệ chiều rộng và chiều cao của hình nền sao cho chúng luôn bằng hoặc lớn hơn chiều rộng/chiều cao của chế độ xem Sử dụng truy vấn phương tiện để cung cấp hình nền nhỏ hơn cho thiết bị di độngĐể cải thiện tốc độ tải trang trên màn hình nhỏ, chúng tôi sẽ sử dụng truy vấn phương tiện để cung cấp phiên bản thu nhỏ của tệp hình nền. Đây là tùy chọn Kỹ thuật sẽ hoạt động mà không cần điều này Nhưng tại sao việc cung cấp hình nền nhỏ hơn cho thiết bị di động lại là một ý tưởng hay? . Kích thước này sẽ được chúng tôi bao phủ trên hầu hết các màn hình máy tính màn hình rộng hiện đang được bán trên thị trường, nhưng với chi phí phục vụ tối đa 1. tệp 7MB Tải trọng khổng lồ đó chỉ dành cho ảnh nền không bao giờ là điều tốt trong bất kỳ tình huống nào, nhưng nó đặc biệt tệ đối với kết nối internet di động Ngoài ra, kích thước hình ảnh quá lớn trên các thiết bị màn hình nhỏ (thêm về điều này trong hướng dẫn này) Hãy xem qua quy trình HTMLĐây là tất cả những gì bạn cần để đánh dấu ...Your content goes here... Chúng ta sẽ gán hình nền cho phần tử background-size: cover;7 để hình ảnh luôn bao phủ toàn bộ khung nhìn của trình duyệt. Tuy nhiên, kỹ thuật này cũng sẽ hoạt động trên bất kỳ phần tử cấp khối nào (chẳng hạn như background-size: cover;8 hoặc background-size: cover;0). Nếu chiều rộng và chiều cao của vùng chứa cấp khối của bạn là linh hoạt, thì hình nền sẽ luôn chia tỷ lệ để bao phủ toàn bộ vùng chứa CSSChúng tôi khai báo một quy tắc kiểu cho phần tử background-size: cover;7 như vậy. nội dung {/* Vị trí của hình ảnh */ hình nền. url(hình ảnh/hình nền. jpg); . trung tâm trung tâm; . không lặp lại; . đã sửa; . trải ra; . #464646; background-size: cover; Đó là nơi phép màu xảy ra Cặp thuộc tính/giá trị này yêu cầu trình duyệt chia tỷ lệ hình nền theo tỷ lệ sao cho chiều rộng và chiều cao của nó bằng hoặc lớn hơn chiều rộng/chiều cao của phần tử. (Trong trường hợp của chúng ta, đó là phần tử background-size: cover;7. ) Tuy nhiên, đã xảy ra sự cố với cặp thuộc tính/giá trị này. Nếu hình nền nhỏ hơn kích thước của phần tử background-size: cover;7 — điều này sẽ xảy ra trên màn hình có độ phân giải cao và/hoặc khi bạn có nhiều nội dung trên trang — thì trình duyệt sẽ phóng to hình ảnh theo chương trình. Và, như chúng ta đều biết, khi chúng ta phóng to hình ảnh từ kích thước tự nhiên của nó, chất lượng hình ảnh sẽ giảm (nói cách khác, hiện tượng pixel hóa xảy ra) Để hình nền luôn được căn giữa trong viewport ta khai báo background-position: center center; Ở trên đặt trục tỷ lệ ở trung tâm của chế độ xem. Tiếp theo, chúng ta cần xử lý tình huống chiều cao của nội dung lớn hơn chiều cao của khung nhìn hiển thị. Khi điều này xảy ra, một thanh cuộn sẽ xuất hiện Điều chúng tôi muốn làm là đảm bảo rằng hình nền vẫn ở nguyên vị trí ngay cả khi người dùng cuộn xuống, nếu không, chúng tôi sẽ hết hình ảnh ở dưới cùng hoặc nền sẽ di chuyển khi người dùng cuộn xuống (có thể là . Để làm điều này, chúng tôi đặt thuộc tính background-size: cover;4 thành background-size: cover;5 background-attachment: fixed; Trong bản demo, tôi đã bao gồm tính năng “tải một số nội dung” để bạn có thể thấy hành vi cuộn khi background-size: cover;4 là background-size: cover;5. Một điều bạn có thể làm là tải xuống bản trình diễn và sau đó thử với các giá trị thuộc tính vị trí (e. g background-size: cover;4 và background-size: cover;9) để xem nó ảnh hưởng như thế nào đến hành vi cuộn trang và hình nền. Các giá trị thuộc tính khác khá dễ hiểu Ký hiệu CSS tốc kýTôi đã viết đầy đủ các thuộc tính nền để làm cho CSS dễ mô tả hơn Ký hiệu CSS tốc ký tương đương cho phần trên là. cơ thể { nền. url(nền-ảnh. jpg) trung tâm bìa trung tâm cố định không lặp lại; Không bắt buộc. Truy vấn phương tiện cho màn hình nhỏĐối với màn hình nhỏ, tôi đã sử dụng Photoshop để thay đổi kích thước hình nền ban đầu theo tỷ lệ xuống 768x505px và tôi cũng chạy nó qua Smush. nó để cắt thêm một vài byte. Làm điều này đã giảm kích thước tệp xuống từ 1741KB xuống 114KB. Đó là giảm 93% kích thước tệp Xin đừng hiểu sai ý tôi, 114KB vẫn còn khá lớn đối với thành phần thẩm mỹ thuần túy của một thiết kế. Đối với tải trọng 114KB, thông thường tôi sẽ chỉ yêu cầu người dùng sử dụng nếu tệp có khả năng bổ sung cải thiện đáng kể về trải nghiệm người dùng, do phải đánh đổi hiệu suất web trên thiết bị di động rất lớn. Đây là truy vấn phương tiện. màn hình chỉ @media và (chiều rộng tối đa. 767px) { body {/* Kích thước tệp của hình nền này nhỏ hơn 93% để cải thiện tốc độ tải trang trên kết nối internet di động */ background-image. url(hình ảnh/nền-ảnh-thiết bị di động. jpg); Nhược điểm của việc sử dụng truy vấn phương tiện ở trên là nếu bạn thay đổi kích thước cửa sổ trình duyệt của mình, chẳng hạn như chiều rộng 1200px xuống chiều rộng 640px (hoặc ngược lại), bạn sẽ thấy nhấp nháy trong giây lát khi hình nền nhỏ hơn hoặc lớn hơn tải lên. Ngoài ra, do một số thiết bị nhỏ có thể hiển thị nhiều pixel hơn — ví dụ: iPhone 5 với màn hình retina có thể hiển thị 1136x640 pixel — hình nền nhỏ hơn sẽ được tạo thành pixel Tạo hình nền đáp ứng đầu tiên của bạn bằng CSSBạn có thể lấy mã nguồn mới nhất của hướng dẫn này từ GitHub. Nếu tôi có thể nói một điều cảnh báo về kỹ thuật này, thì đó là. Vui lòng sử dụng cẩn thận vì các tệp lớn có thể ảnh hưởng nghiêm trọng đến UX, đặc biệt khi người dùng của chúng tôi không có kết nối Internet nhanh hoặc đáng tin cậy Đây cũng là lý do tại sao bạn nên đặt màu nền mặc định tốt để người dùng có thể đọc nội dung trong khi hình nền đang tải. Tối ưu hóa các hình ảnh trên Web của bạn trước khi đưa chúng vào sản xuất cũng không phải là một ý kiến tồi;
Giấy phép. Cống hiến miền công cộngKhông cần xin phép nếu bạn muốn sử dụng mã nguồn có trong hướng dẫn này; . 0 Phổ thông. Mã nguồn trong repo GitHub của tôi không có bất kỳ giới hạn bản quyền nào Bạn có thể sử dụng, bán, sửa đổi và phân phối mã nguồn mà không cần xin phép, cung cấp ghi công hoặc bất kỳ yêu cầu nào khác. (Tôi không sở hữu hình nền, nó từ Unsplash. ) Nội dung liên quan
Trang web của bạn SEO như thế nào?Sử dụng công cụ miễn phí của chúng tôi để tính điểm của bạn trong vòng chưa đầy 60 giây Nhận điểm SEO của bạnTài nguyên liên quan
Trang web của bạn SEO như thế nào?Sử dụng công cụ miễn phí của chúng tôi để tính điểm của bạn trong vòng chưa đầy 60 giây Nhận điểm SEO của bạnTuyển dụng WebFXTham gia sứ mệnh của chúng tôi để cung cấp các dịch vụ tiếp thị kỹ thuật số hàng đầu trong ngành cho các doanh nghiệp trên toàn cầu - đồng thời xây dựng kiến thức cá nhân của bạn và phát triển với tư cách cá nhân Làm cách nào tôi có thể tự động thay đổi hình nền của mình?Tải lên hình ảnh cần thay đổi nền ảnh inPixio tự động làm nền trong suốt Nếu cần, hãy hoàn thiện vùng chọn bằng các điểm đánh dấu Nhấp vào nền mới để áp dụng cho ảnh của bạn Tải xuống ảnh đã hoàn thành của bạn Bạn có thể tạo hiệu ứng động cho hình nền trong CSS không?Bạn có thể sử dụng CSS để tạo hoạt ảnh và hiệu ứng hình ảnh hợp thời trang . Bạn không cần biết JavaScript hay thậm chí HTML và tạo các loại hoạt ảnh và môi trường khác nhau trên trang web của mình. Nhóm của chúng tôi tại Slider Revolution đã nghiên cứu các ví dụ về nền động CSS có thể giúp bạn tạo các trang web thú vị. |
