Hiệu ứng ảnh nền CSS

Trong thiết kế web hiện đại, phông nền rất lớn (theo cả nghĩa đen và nghĩa bóng). Với sự ra đời của màn hình HD (và bây giờ là 4K), các nhà thiết kế tạo ra các hình nền chiếm nhiều diện tích màn hình. Tại sao?

Nhưng còn nhiều thứ khác đối với nền hơn là chỉ ném một bức ảnh hoặc kết cấu vào một không gian rộng lớn — sự kết hợp giữa CSS và một chút sức mạnh JavaScript thỉnh thoảng tạo ra một số hiệu ứng đặc biệt tuyệt vời

Hãy cùng khám phá một số cách độc đáo mà các nhà thiết kế đang thêm gia vị cho hình nền. Chúng tôi cũng sẽ bao gồm một ví dụ cho từng kỹ thuật để bạn có thể thấy chính xác cách chúng hoạt động

Thay đổi màu chế độ hòa trộn CSS của Giana

Hiệu ứng nền này thú vị đến nỗi phần tử cố định ở trên cùng dường như thay đổi màu sắc khi người dùng cuộn. Việc sử dụng thuộc tính CSS mix-blend-mode cho phép thay đổi màu sắc, điều này phụ thuộc vào nội dung của nền

Xem thay đổi nền Pen CSS khi cuộn của Giana

Hoạt hình cuộn của Jonathan Marzullo

Gợi nhớ đến các trò chơi video cuộn bên trong quá khứ, kỹ thuật này có hai hình ảnh riêng biệt – mỗi hình ảnh cuộn theo hướng ngược lại. Nó được thực hiện với sự trợ giúp của CSS transform và một số JS

Xem Pen GSAP Animate CSS background-position của Jonathan Marzullo

Bị lệch bởi Marcel

Hình nền lệch là một trong những xu hướng nóng nhất trong thiết kế web. Đó là một hiệu ứng cực kỳ dễ thực hiện trong thiết kế in ấn và khó thực hiện trên web – cho đến tận bây giờ. Giải pháp HTML/CSS thuần túy này làm cho nó trở nên dễ dàng

Xem Pen skew bg của Marcel

Hình ảnh chuyển động của Kevin Lesht

Sử dụng một chút CSS khá đơn giản, nền này cho phép chuyển đổi mượt mà giữa nhiều hình ảnh. Nó tạo ra một thanh trượt nhẹ hơn nhiều so với JavaScript truyền thống

Xem Trình chiếu ảnh nền CSS toàn màn hình của Pen bởi Kevin Lesht

Gradient hoạt hình của Mario Klingemann

Nếu không được thực hiện cẩn thận, nền hoạt hình có thể làm sao lãng bất kỳ nội dung nào nằm trên nền đó. Ví dụ chuyển màu động này rất hay vì đó là một hiệu ứng tinh tế hơn. Sử dụng JavaScript, bạn có thể xác định màu gradient để phù hợp với bảng màu của mình

Xem Gradient nền hoạt hình bút của Mario Klingemann

Làm mờ trên cuộn bởi Zach Richard

Kỹ thuật này có thể khá hữu ích khi bạn thực sự muốn khách truy cập tập trung vào hình nền (như tiêu đề của một bài báo) và sau đó cho phép dễ dàng đọc văn bản ở trên cùng. Một chút jQuery thay đổi thuộc tính background-size khi cuộn để tạo hiệu ứng

Xem hình ảnh nền Pen Zoom và Blur của Zach Richard

Hình ảnh anh hùng mờ dần với lớp phủ của Rand Seay

Có một vài điều xảy ra với ví dụ này. Đầu tiên, hình ảnh anh hùng có chiều rộng đầy đủ được thêm lớp phủ màu ở trên cùng để tạo ra màu sắc khác. Sau đó, một hoạt ảnh mờ dần được triển khai để giới thiệu hình ảnh một cách trực quan mượt mà. Cuối cùng, hiệu ứng cuộn kiểu thị sai được thêm vào hỗn hợp. Kết quả là một giao diện rất hiện đại sử dụng tương đối ít mã (và không có JS)

Xem xếp chồng hình nền Pen CSS với mờ dần và lớp phủ của Rand Seay

Thu phóng & Xoay nền của Krz Szzz

Đây là một hiệu ứng chúng ta thấy khá nhiều gần đây. Khi người dùng di chuột qua bảng điều khiển, hình nền sẽ phóng to và xoay cùng với bất kỳ chuyển động nào của con trỏ. Đó là một cách dễ dàng để thêm một số tương tác và duy trì sự quan tâm của người dùng

Xem Pen Zoom + pan hình ảnh khi di chuột & di chuyển chuột của Krz Szzz

Tiết lộ trên Hover của Eric Karkovack

Ví dụ này hiển thị một màn hình chia nhỏ trong đó nền được hiển thị dựa trên vị trí chuột của người dùng. Tuyệt vời để so sánh, chẳng hạn như ảnh 'trước' và 'sau'

Xem tiết lộ Nền CSS Pen của Eric Karkovack

Thay đổi màu sắc trên cuộn của Jack Harner

Đôi khi chúng ta quên mất việc sử dụng các màu đồng nhất đơn giản có thể mạnh mẽ như thế nào. Ở đây, chúng ta thấy tác động mà nó có thể tạo ra khi màu nền thay đổi dựa trên vị trí cuộn. Giải pháp gọn nhẹ này có thể mang lại hiệu quả trực quan như hình ảnh nặng

Xem Bút thay đổi màu nền khi cuộn của Jack Harner

Bối cảnh ở phía trước

Nền không còn chỉ là phương tiện để đóng khung nội dung – giờ đây chúng thường là một phần của chính nội dung

Với rất nhiều cách thú vị để sử dụng chúng, bạn nên thử nghiệm các kỹ thuật nền khác nhau và xem cách chúng có thể nâng cao trải nghiệm người dùng cho dự án tiếp theo của bạn

Thuộc tính CSS backdrop-filter cho phép bạn áp dụng các hiệu ứng đồ họa như làm mờ hoặc chuyển màu cho khu vực phía sau một phần tử. Bởi vì nó áp dụng cho mọi thứ phía sau phần tử, để thấy được hiệu ứng, bạn phải làm cho phần tử hoặc nền của phần tử ít nhất trong suốt một phần

/* Keyword value */
backdrop-filter: none;

/* URL to SVG filter */
backdrop-filter: url(commonfilters.svg#filter);

/*  values */
backdrop-filter: blur(2px);
backdrop-filter: brightness(60%);
backdrop-filter: contrast(40%);
backdrop-filter: drop-shadow(4px 4px 10px blue);
backdrop-filter: grayscale(30%);
backdrop-filter: hue-rotate(120deg);
backdrop-filter: invert(70%);
backdrop-filter: opacity(20%);
backdrop-filter: sepia(90%);
backdrop-filter: saturate(80%);

/* Multiple filters */
backdrop-filter: url(filters.svg#filter) blur(4px) saturate(150%);

/* Global values */
backdrop-filter: inherit;
backdrop-filter: initial;
backdrop-filter: revert;
backdrop-filter: revert-layer;
backdrop-filter: unset;

none

Không có bộ lọc nào được áp dụng cho phông nền

Danh sách được phân tách bằng dấu cách hoặc bộ lọc SVG sẽ được áp dụng cho phông nền

Giá trị ban đầu_______5_______Áp dụng cho tất cả các phần tử;

Làm cách nào để đặt hình nền trong CSS?

Ảnh nền CSS .
Đặt hình nền cho trang. cơ thể {hình nền. url("giấy. gif"); }.
Ví dụ này cho thấy sự kết hợp không tốt giữa văn bản và hình nền. Các văn bản là khó có thể đọc được. cơ thể {hình nền. url("bgdesert. jpg");.
p { hình nền. url("giấy. gif"); } Tự mình thử »

Hình nền CSS có thể hoạt hình không?

Chúng tôi có thể di chuyển hình nền bằng cách sử dụng thuộc tính hoạt ảnh CSS3 để tạo ảo giác về video đang chạy. Hoạt hình CSS3 được hỗ trợ bởi tất cả các trình duyệt hiện đại. Để hỗ trợ hoạt ảnh trong các trình duyệt khác nhau, bạn phải đề cập đến tiền tố nhà cung cấp của trình duyệt đó với khung hình chính.

Làm cách nào để lọc CSS nền?

Thuộc tính backdrop-filter trong CSS được sử dụng để áp dụng các hiệu ứng bộ lọc ( thang độ xám, độ tương phản, độ mờ, v.v.) cho nền/phông nền của phần tử . Bộ lọc phông nền có tác dụng tương tự như thuộc tính bộ lọc, ngoại trừ các hiệu ứng bộ lọc chỉ được áp dụng cho nền thay vì nội dung của phần tử.

Chế độ hòa trộn nền trong CSS là gì?

Thuộc tính CSS chế độ hòa trộn nền đặt cách các hình nền của phần tử hòa trộn với nhau và với màu nền của phần tử .