Thu phóng bìa nền css

Phần lớn người dùng đang làm việc, học tập tại nhà rất đáng sợ khi mở máy ảnh khi gặp qua Zoom. Đặc biệt, bạn sẽ cảm thấy thiếu tự tin khi nền căn phòng lộn xộn không như ý muốn. Vì thế trong bài viết này, Ap24h. vn sẽ chia sẻ cách thay đổi hình nền Zoom khi họp trực tuyến trên MacBook, iPhone nhé

Phần lớn người dùng học tập, làm việc tại nhà rất đáng sợ khi mở máy ảnh khi gặp qua Zoom. Đặc biệt, bạn sẽ cảm thấy thiếu tự tin khi nền căn phòng lộn xộn không như ý muốn. Vì thế trong bài viết này, Ap24h. vn sẽ chia sẻ cách thay đổi hình nền Zoom khi họp trực tuyến trên MacBook, iPhone nhé

Thay đổi hình nền khi gặp trực tuyến trên Zoom

CÁC YÊU CẦU CẦN BIẾT KHI SỬ DỤNG NỀN ẢNH ZOOM

Với máy tính MacBook

+ Cài đặt Zoom phiên bản 4. 6. 0 (13614. 1202) trở lên.
+ CPU 4 nhân i7 thế hệ 4 trở lên.
+ CPU 2 nhân i5 thế hệ thứ 6 hoặc cao hơn.
+ Yêu cầu MacOS 10. 14 trở lên.

Với iPhone/iPad

+Ứng dụng Zoom phiên bản 4. 1. 27541. 0627 trở lên
+ iPhone 8, 8 Plus hoặc mới hơn
+ iPad Pro, iPad 9. 7 thế hệ thứ 5, 6 trở lên.

Lưu ý

+ Để tạo hiệu ứng nền ảo tốt nhất, bạn nên trang bị màn hình xanh hoặc trắng.
+ Nên sử dụng máy ảnh chất lượng cao để làm webcam.
+Recovery source sáng vừa đủ và đều.
+ Không mặc quần áo giống với màu nền.
+ Nếu tự chọn hình nền, hãy chọn ảnh có tỷ lệ khung hình 16. 9, độ phân giải tối thiểu 1280 x 720 pixel.

TRÊN DẪN KÍCH HOẠT NỀN ẢO TRÊN ZOOM

Trên máy tính MacBook

Bước 1. Đăng nhập phần mềm Zoom trên thiết bị

Bước 2. Bấm vào hồ sơ ảnh của bạn, sau đó chọn Cài đặt (Settings)

Truy cập Cài đặt phần mềm Zoom trên macOS

Bước 3. Chọn vào mục Virtual Background

Bước 4. Trong trường hợp bạn đã chuẩn bị có nền xanh, hãy đánh dấu vào mục Tôi có màn hình xanh

Bước 5. Chọn hình nền ảo mà Zoom cho sẵn

Trong trường hợp muốn sử dụng hình nền riêng, bạn nhấn vào + Thêm hình ảnh và chọn đường dẫn

Thiết lập hình nền ảo Thu phóng trên macOS

Ngoài ra, bạn cũng có thể thay đổi nền ngay khi đang họp trực tuyến qua Zoom. Nhấp vào mũi tên bên cạnh Chức năng Bắt đầu/Dừng video sau đó chọn Chọn Nền ảo

Bạn có thể thay đổi hình nền ảo Zoom ngay trong cuộc họp

Trên iPhone/iPad

Bước 1. Tham gia cuộc họp trực tuyến qua Zoom, chọn mục Xem thêm (Thêm)

Bước 2. Nhấp vào Nền ảo

Bước 3. Chọn hình nền ảo được cung cấp sẵn

Cài đặt hình nền Zoom trên iPhone hoặc iPad

Tương tự như thao tác trên máy tính, nếu muốn sử dụng nền khác trên điện thoại, hãy nhấn vào biểu tượng dấu cộng để bổ sung nhé

Tùy chọn hình nền Thu phóng trên điện thoại, bảng máy tính

Như vậy, chúng ta đã tìm ra cách thay đổi hình nền Thu phóng khi gặp trực tuyến bằng MacBook, iPhone hoặc iPad. Bạn có gặp khó khăn ở bước nào khi thực hiện? . vn trong phần bình luận bên dưới bài viết này nhé

Sau đây là bài viết của khách mời Dylan Winn-Brown, người chỉ cho chúng ta một cách hiệu quả để đạt được hiệu ứng thiết kế này

Gần đây, khi đang làm việc trên trang web của khách hàng, tôi đã được yêu cầu sao chép một hiệu ứng như thế này

Các vùng chứa có hình nền phóng to trong vùng chứa của chúng khi di chuột, tiết lộ thêm thông tin

Loại hiệu ứng này được sử dụng đáng chú ý trong các tình huống kiểu danh mục đầu tư trong đó thiết kế dự định hiển thị cả chi tiết hình ảnh và thông tin

Có nhiều phương pháp khả thi khác nhau

Vì tôi chưa bao giờ tạo hiệu ứng như thế này trước đây nên tôi bắt đầu xem xét các cách khác nhau để thực hiện việc này và tìm ra một số phương pháp khác nhau.

Một tùy chọn là sử dụng Plugin jQuery. Cái này không hoàn toàn là hiệu ứng mà tôi theo đuổi, và chắc chắn là không nhẹ lắm

Một tùy chọn khác là định vị một

.parent {
  width: 400px; 
  height: 300px;
}

.child {
  width: 100%;
  height: 100%;
  background-color: black; /* fallback color */
  background-image: url("images/city.jpg");
  background-position: center;
  background-size: cover;
}

7 trong vùng chứa và thao tác với nó bằng CSS. Có thể có một số lợi ích tiềm năng ở đây, chẳng hạn như có thể đặt nguồn bằng

.parent {
  width: 400px; 
  height: 300px;
}

.child {
  width: 100%;
  height: 100%;
  background-color: black; /* fallback color */
  background-image: url("images/city.jpg");
  background-position: center;
  background-size: cover;
}

8 để hình ảnh được sử dụng có hiệu suất và phù hợp với thiết bị

Trong trường hợp của tôi, tôi muốn quản lý hiệu ứng hoàn toàn bằng CSS, vì vậy tôi đã thực hiện điều đó

chức năng cơ bản

Để đạt được hiệu quả tối ưu, mình quyết định sử dụng thuộc tính CSS

.parent {
  width: 400px; 
  height: 300px;
}

.child {
  width: 100%;
  height: 100%;
  background-color: black; /* fallback color */
  background-image: url("images/city.jpg");
  background-position: center;
  background-size: cover;
}

0 để xử lý phóng to ảnh. (Hoạt ảnh CSS được hưởng lợi từ khả năng tăng tốc phần cứng và kết quả là xuất hiện mượt mà hơn các phương pháp tạo hoạt ảnh khác. )

Thay vì một

.parent {
  width: 400px; 
  height: 300px;
}

.child {
  width: 100%;
  height: 100%;
  background-color: black; /* fallback color */
  background-image: url("images/city.jpg");
  background-position: center;
  background-size: cover;
}

7, tôi đã sử dụng một

.parent {
  width: 400px; 
  height: 300px;
}

.child {
  width: 100%;
  height: 100%;
  background-color: black; /* fallback color */
  background-image: url("images/city.jpg");
  background-position: center;
  background-size: cover;
}

2 bổ sung bên trong cha mẹ để đóng vai trò là hình ảnh. cấu trúc được

Trước tiên, chúng tôi chỉ định kích thước cho phần tử cha. Sau đó, đứa trẻ có thể điền vào cha mẹ bằng cách sử dụng

.parent {
  width: 400px; 
  height: 300px;
}

.child {
  width: 100%;
  height: 100%;
  background-color: black; /* fallback color */
  background-image: url("images/city.jpg");
  background-position: center;
  background-size: cover;
}

3 và

.parent {
  width: 400px; 
  height: 300px;
}

.child {
  width: 100%;
  height: 100%;
  background-color: black; /* fallback color */
  background-image: url("images/city.jpg");
  background-position: center;
  background-size: cover;
}

4, cũng như đặt hình nền, đảm bảo nó có tỷ lệ bao phủ khu vực

.parent {
  width: 400px; 
  height: 300px;
}

.child {
  width: 100%;
  height: 100%;
  background-color: black; /* fallback color */
  background-image: url("images/city.jpg");
  background-position: center;
  background-size: cover;
}

Sau đó, chúng tôi thêm hiệu ứng di chuột vào phần tử cha, điều này sẽ ảnh hưởng đến phần tử con của chúng tôi. Một kiểu tiêu điểm cũng tốt cho khả năng tiếp cận

.parent:hover .child,
.parent:focus .child {
  transform: scale(1.2);
}

Bạn có thể muốn sử dụng một công cụ để thêm tiền tố để hỗ trợ trình duyệt tốt nhất có thể

Để hoàn thành hiệu ứng cơ bản, chúng ta có thể thêm một số hiệu ứng chuyển tiếp vào trạng thái bình thường của phần tử con

transition: all .5s;

Nếu bạn muốn thêm lớp phủ màu, bạn có thể sử dụng các phần tử giả như

.parent {
  width: 400px; 
  height: 300px;
}

.child {
  width: 100%;
  height: 100%;
  background-color: black; /* fallback color */
  background-image: url("images/city.jpg");
  background-position: center;
  background-size: cover;
}

5

.child::before {
  content: "";
  display: none;
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-color: rgba(52, 73, 94, 0.75);
}

.parent:hover .child:before,
.parent:focus .child:before {
  display: block;
}

Bây giờ khi chúng ta di chuột vào phần tử cha, phần tử con sẽ hiển thị lớp phủ màu

Cuối cùng, chúng tôi sẽ giới thiệu cách thêm một số văn bản để hiển thị trên lớp phủ của chúng tôi. Chúng ta có thể thêm một phần tử vào phần tử con hiện tại của mình như vậy

.parent {
  width: 400px; 
  height: 300px;
}

.child {
  width: 100%;
  height: 100%;
  background-color: black; /* fallback color */
  background-image: url("images/city.jpg");
  background-position: center;
  background-size: cover;
}

0

Chúng ta có thể tạo cho

.parent {
  width: 400px; 
  height: 300px;
}

.child {
  width: 100%;
  height: 100%;
  background-color: black; /* fallback color */
  background-image: url("images/city.jpg");
  background-position: center;
  background-size: cover;
}

6 của mình một số phong cách

.parent {
  width: 400px; 
  height: 300px;
}

.child {
  width: 100%;
  height: 100%;
  background-color: black; /* fallback color */
  background-image: url("images/city.jpg");
  background-position: center;
  background-size: cover;
}

2

và chúng tôi chỉ có thể làm cho nó hiển thị khi chúng tôi di chuột vào

.parent {
  width: 400px; 
  height: 300px;
}

.child {
  width: 100%;
  height: 100%;
  background-color: black; /* fallback color */
  background-image: url("images/city.jpg");
  background-position: center;
  background-size: cover;
}

7

.parent {
  width: 400px; 
  height: 300px;
}

.child {
  width: 100%;
  height: 100%;
  background-color: black; /* fallback color */
  background-image: url("images/city.jpg");
  background-position: center;
  background-size: cover;
}

4

Bản thử trực tiếp

Xem Pen Image zoom on hover – portfolio websites của Dylan (@dwinnbrown) trên CodePen

Hỗ trợ di động

Nếu vùng chứa là liên kết và trạng thái di chuột không tiết lộ bất kỳ thông tin cần thiết nào, bạn có thể để yên

Nếu trạng thái di chuột là quan trọng, để điều này hoạt động trên màn hình cảm ứng, chúng tôi có thể sử dụng trình xử lý

.parent {
  width: 400px; 
  height: 300px;
}

.child {
  width: 100%;
  height: 100%;
  background-color: black; /* fallback color */
  background-image: url("images/city.jpg");
  background-position: center;
  background-size: cover;
}

8 trống trên vùng chứa

.parent {
  width: 400px; 
  height: 300px;
}

.child {
  width: 100%;
  height: 100%;
  background-color: black; /* fallback color */
  background-image: url("images/city.jpg");
  background-position: center;
  background-size: cover;
}

7 của chúng tôi. Thật không may, tôi không thể tìm ra cách khác để làm điều này nhưng nếu có ai trong số các bạn làm được, hãy cho tôi biết trong phần nhận xét